介绍 & lt; div类=癱ontainer"比;
& lt; div类=皊un"祝辞& lt;/div>
& lt; div类=癳arth"祝辞
& lt; div类=癿oon"祝辞& lt;/div>
& lt;/div>
& lt;/div> 身体{
保证金:0;
身高:100 vh;
显示:flex;
对齐项目:中心;
justify-content:中心;
背景颜色:黑色;
} 。容器{
字体大小:10 px;
宽度:40 em;
高度:40 em;
位置:相对;
} 。太阳{
位置:绝对的;
上图:15他们;
左:15他们;
宽度:10 em;
高度:10 em;
背景颜色:黄色;
这个特性:50%;
不必:0 0 3 em白色;
} .earth,
.moon {
位置:绝对的;
边框样式:固体;
边框颜色:白色透明透明透明;
边框宽度:0.1 em 0.1 em 0 0;
这个特性:50%;
}
.earth {
上图:5 em;
左:5 em;
宽度:30 em;
高度:30 em;
}
.moon {
上图:0;
右:0;
宽度:8 em;
高度:8 em;
} .earth::,
{前.moon::
位置:绝对的;
这个特性:50%;
内容:& # 39;& # 39;;
}
{前.earth::
上图:2.8 em;
右:2.5 em;
高度:3他们;
宽度:3他们;
background - color:水;
}
{前.moon::
上图:0.8 em;
右:0.2 em;
宽度:1.2 em;
高度:1.2 em;
背景颜色:银色;
} /* */旋转周期365.2422天
.earth {
动画:轨道36.5年代线性无限;
}/* */旋转周期27.322天
.moon {
动画:轨道2.7年代线性无限;
}
{@keyframes轨道
,{
变换:旋转(360度);
}
} 身体{
溢出:隐藏;
}
使用纯CSS实现太阳和地球和月亮运转模型动画的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
代码解读
定义dom,容器中包含3个元素:
居中显示:
定义容器尺寸:
画出太阳:
画出地球和月球的轨迹:
用伪元素画出地球和月球:
设置运转动画效果:
最后,隐藏可能会出现在容器外的部分:
感谢各位的阅读!看完上述内容,你们对使用纯CSS实现太阳和地球和月亮运转模型动画的方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。
