14（高级）CSS动画之：旋转星球

最新推荐文章于 2024-12-25 22:57:25 发布

majun0007

最新推荐文章于 2024-12-25 22:57:25 发布

阅读量1.3k

点赞数

分类专栏：（CSS高级篇）CSS看书总结及特效个人作品汇总文章标签： CSS html CSS3 动画

本文链接：https://blog.youkuaiyun.com/majun0007/article/details/55210382

版权

本文介绍了如何利用CSS3的动画特性，创建一个逼真的旋转星球效果。通过设置元素的背景图片、边框半径和定位，并应用关键帧动画`@keyframes`，实现星球绕其轴心平滑旋转的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法：

#earth{
    width: 800px;
    height: 800px;
    clear: both;
    background:url("earth.png") center center no-repeat;
    background-color:#ffbb33 ;
    border-radius: 50%;
    position: relative;
}
#earth img{
    animation: spin 10s infinite linear;
    position: absolute;
    top: 0;
    left: calc(50%- 25px);
}@keyframes spin {
    from{
        transform: translate(50%,400px)
        rotate(0turn)
        translate(-50%,-400px)
        translate(50%,50%)
        rotate(1turn)
        translate(-50%,-50%)
    }
    to{
        transform: translate(50%,400px)
        rotate(1turn)
        translate(-50%,-400px)
        translate(50%,50%)
        rotate(0turn)
        translate(-50%,-50%)
    }
}