html中怎么制作太阳月亮交替,如何使用纯CSS实现太阳和地球和月亮的运转模型动画...-程序员宅基地

技术标签: html中怎么制作太阳月亮交替  

这篇文章给大家带来的内容是关于如何使用纯CSS实现太阳和地球和月亮的运转模型动画 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

效果预览

a4c496e785aaa4021a7e3e2b66c1d47c.png

源代码下载

https://github.com/comehope/front-end-daily-challenges

代码解读

定义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;

}

大功告成!

相关推荐:

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_36349918/article/details/118328370

智能推荐

Python中什么是异常,Python中有哪些异常_python 异常-程序员宅基地

文章浏览阅读4.6k次。如前面所述,虽然Python代码通过了解释,但是在执行时仍有可能触发错误,而这类的错误就称为异常。大部分异常会导致程序无法继续执行。一旦程序运行后发现有异常,Python会直接显示异常的信息,通常包括:异常出现的地方、异常的类型和内容。如下:我们可以看到上述示例中的异常类型依次是:ZeroDivisionError, NameError 和 TypeError。_python 异常

linux删除第二列为空_shell去掉文件中空行(空白行)的方法详解-程序员宅基地

文章浏览阅读1.3k次。本文详细介绍了使用shell去除文件中的空行的方法,学习下sed、awk、shell文件检测的方法,有需要的朋友可以作个参考。本节内容:shell去掉文件中空行1,shell 去掉文件中的空行cat filename | sed -e '/^$/d' > filename2,保留最新的9个文件,其它的文件删除的命令语句ls -t | awk '{if(NR>9){print $0}}'..._去除linux行第二个字符是空格

Python基础——从csv文件中读取数据,提取数据的方法_python从csv提取特定数据-程序员宅基地

文章浏览阅读10w+次,点赞258次,收藏1.7k次。数据保存在csv文件中1.从csv文件中读取数据参数header=None的有无(1)没有header=None——直接将csv表中的第一行当作表头# 读取数据import pandas as pddata = pd.read_csv("data1.csv")print(data)打印结果为:(2)有header=None——自动添加第一行当作表头# 读取数据impor..._python从csv提取特定数据

适用于 iOS 的 10 个最佳数据恢复工具分享_奇客数据恢复ios版-程序员宅基地

文章浏览阅读1.1k次,点赞8次,收藏3次。在当今的数字时代,我们的移动设备占据了我们生活的很大一部分。从令人难忘的照片和视频到重要的文档和消息,我们的 iOS 设备存储了大量我们无法承受丢失的数据。然而,事故时有发生,无论是由于软件故障、无意删除,甚至是硬件损坏,丢失数据都可能令人痛苦。值得庆幸的是,许多数据恢复工具是专门为 iOS 设备设计的。这些工具是检索丢失或删除的文件的最佳选择。_奇客数据恢复ios版

51单片机c语言脉冲计数实验报告,单片机计数器实验报告.doc-程序员宅基地

文章浏览阅读2.2k次。单片机计数器实验报告单片机计数器实验报告计数器实验报告㈠ 实验目的学习单片机内部定时/计数器的使用和编程方法;进一步掌握中断处理程序的编程方法。㈡ 实验器材G6W仿真器一台MCS—51实验板一台PC机一台电源 一台信号发生器一台㈢ 实验内容及要求8051内部定时计数器,按计数器模式和方式1工作,对P3.4(T0)引脚进行计数,使用8051的T1作定时器,50ms中断..._脉冲计数器实验报告

微信小程序swiper高度自适应,swiper的子元素高度不固定怎么做_微信小程序swiper高度不固定,允许上下滑动-程序员宅基地

文章浏览阅读1.3k次。微信小程序自动的swiper大家都知道默认高度是150px,如果需要去修改高度,我在网上看到的方式都是用js去动态算高度,今天给大家提供一种新的思路 使用 swiper+scroll-view css使用display:flex 父元素dingy flex:1废话不多说 直接上代码 :wxml:<!--pages/talentedPeople/talentS..._微信小程序swiper高度不固定,允许上下滑动

随便推点

Superset安装过程_superset 安装 from wtforms.ext.sqlalchemy.fields imp-程序员宅基地

文章浏览阅读318次。今天准备帮朋友试一下Superset,记录下安装过程准备工作:1、使用vitualenvwrapper创建一个新的虚拟环境2、在MySQL中新建一个数据库supersetdb安装过程:1、# Install superset 安装Superset,此过程会安装Flask等必要的包pip install apache-superset -i https://pypi.douban..._superset 安装 from wtforms.ext.sqlalchemy.fields import queryselectfield mod

暑期RHCSA 2022.07.19_sysmgrs-程序员宅基地

文章浏览阅读119次。1.linux中用户的类型 linux中用户组的类型 linux中存储用户信息的文件是哪个?且其中的字段是什么意思 linux中存储组信息的文件是哪个?且其中的字段是什么意思?2.创建下列用户、组和组成员资格:(1)创建名为 sysmgrs 的组(2)创建用户 natasha 同时指定sysmgrs作为natasha的附加组(3)创建用户 harry 同时指定 sysmgrs作为harry的附加组(4)创建用户 sarah 指定shell类型为/sbin/fals..._sysmgrs

国培计算机音乐教学设计作业,2017国培计划教学设计-程序员宅基地

文章浏览阅读277次。2017国培计划教学设计教学工作任重而道远,面对国培教学内容,希望与挑战并存。下面是学习啦小编为大家整理的2017国培计划教学设计,供大家阅读!2017国培计划教学设计篇1一、指导思想以“提高教学质量”为核心,以“新课程有效教学”为抓手,以校本研修提高教师专业素质为突破口,以远教资源应用为主渠道,以高效课堂为重点,深入开展教学研究,树立“以学生发展为本”的教育思想,不断更新教学观念,改变教师的教学..._音乐提交一份使用信息技术进行教育教学的教学设计,该设计中包括主题、教学对象及

php服务端处理IOS自动续费_php 苹果续费退款回调处理-程序员宅基地

文章浏览阅读1.1k次。公司做的app需要做IAP订阅支付,自己做完总结一下,希望对小伙伴们有帮助我就很欣慰了。代码写的不好 不要喷我。首先讲一下我的业务逻辑:先上图下面详细讲一下,作为服务端具体要做些什么,并贴上对应的代码:第一步:通过客户端传过来的recept(票据)进行生成订单的操作【注意这里需要验证订单是否已存在】,订单生成返回客户端相关信息; public function pay() { $uid = $this->request->header('uid'); _php 苹果续费退款回调处理

广东印发知识产权人才“十四五”规划_优化知识产权人才激励制度-程序员宅基地

文章浏览阅读337次。近日,广东印发知识产权人才“十四五”规划,全面加强广东知识产权人才队伍建设,完善知识产权人才结构,拓宽知识产权人才培养渠道,健全知识产权人才评价激励和流动配置机制,优化知识产权人才工作环境,为广东高质量发展提供坚实的知识产权人才支撑。  《规划》紧抓“双区”建设和两个合作区建设重大历史机遇,牢固确立人才是第一资源理念,紧紧围绕建设知识产权强国先行示范省需求,健全知识产权人才评价激励和流动配置机制,优化知识产权人才工作环境,结合广东经济社会发展实际,着眼知识产权与科技创新、产业发展、商贸融合的发展趋势,将_优化知识产权人才激励制度

JQuery EasyUI Tree-程序员宅基地

文章浏览阅读508次。TreeTree的定义树(tree)定义在 ul 元素中。该标记可定义叶节点和子节点。节点将是 ul 列表内的 li 元素。<ul id="tt" class="easyui-tree"> <li> <span>Folder</span> <ul> <li> <span>Sub..._jquery easyui tree