css3地球球转动

在前端开发中，CSS3技术已经成为了必不可少的一部分，其中包括了很多有趣的特效，例如地球球的旋转特效。

/* 创建地球球样式 */.earth {
    width: 200px;
    height: 200px;
    position: relative;
    perspective: 800px;
}
/* 创建地球球容器 */.earth .globe {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
    transform: translateZ(-10px);
}
/* 创建地球球背景 */.earth .globe:before {
    content: "";
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    background-image: url(earth.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    opacity: 0.6;
}
/* 创建地球球轨道 */.earth .orbit {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
    transform: translateZ(-10px);
    animation: rotation 20s linear infinite;
}
/* 创建地球球轨道背景 */.earth .orbit:before {
    content: "";
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid gray;
    border-radius: 50%;
    box-sizing: border-box;
    opacity: 0.2;
}
@keyframes rotation {
from {
    transform: rotateY(0deg);
}
to {
    transform: rotateY(-360deg);
}
}
    

使用上述CSS样式，就可以轻松实现一个CSS3地球球旋转的特效了。可以通过修改旋转速度、背景图、轨道颜色等参数，来达到不同的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！