扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
使用纯CSS实现太阳和地球和月亮运转模型动画的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
目前成都创新互联已为近千家的企业提供了网站建设、域名、网页空间、网站托管运营、企业网站设计、坡头网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
定义dom,容器中包含 3 个元素:
居中显示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; }
定义容器尺寸:
.container { font-size: 10px; width: 40em; height: 40em; position: relative; }
画出太阳:
.sun { position: absolute; top: 15em; left: 15em; width: 10em; height: 10em; background-color: yellow; border-radius: 50%; box-shadow: 0 0 3em white; }
画出地球和月球的轨迹:
.earth, .moon { position: absolute; border-style: solid; border-color: white transparent transparent transparent; border-width: 0.1em 0.1em 0 0; border-radius: 50%; } .earth { top: 5em; left: 5em; width: 30em; height: 30em; } .moon { top:0; right: 0; width: 8em; height: 8em; }
用伪元素画出地球和月球:
.earth::before, .moon::before { position: absolute; border-radius: 50% ; content: ''; } .earth::before { top: 2.8em; right: 2.5em; height: 3em; width: 3em; background-color: aqua; } .moon::before { top: 0.8em; right: 0.2em; width: 1.2em; height: 1.2em; background-color: silver; }
设置运转动画效果:
/* rotation period 365.2422 days */ .earth { animation: orbit 36.5s linear infinite; } /* rotation period 27.322 days */ .moon { animation: orbit 2.7s linear infinite; } @keyframes orbit { to { transform: rotate(360deg); } }
最后,隐藏可能会出现在容器外的部分:
body { overflow: hidden; }
感谢各位的阅读!看完上述内容,你们对使用纯CSS实现太阳和地球和月亮运转模型动画的方法大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流