css动画地球自转 |css滑动门图片下载

/* 创建一个地球的div */
/* CSS代码 */
.earth {
width: 100px;
height: 100px;
border-radius: 50%;
background-image: url('地球图片的路径');
background-size: cover;
position: relative;
-webkit-animation: rotation 10s linear infinite;
animation: rotation 10s linear infinite;
}
/* 创建一个自转的动画 */
@keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* 兼容性代码 */
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

首先，大家需要创建一个div来代表地球，给它设置一个大小和圆角边框，然后设置一个背景图片来呈现地球的样子。大家接下来为这个div添加CSS动画，这个动画就是让地球自转。大家使用CSS3的@keyframes来创建一个自转的动画，从0度到360度不断旋转，最后设置动画的持续时间和循环次数。

使用CSS实现地球自转的效果确实非常简单，加入到网页之后，能够在页面中呈现出生动、有趣且迷人的效果。这也正是CSS动画的魔力之一。