技术标签: html中怎么制作太阳月亮交替
这篇文章给大家带来的内容是关于如何使用纯CSS实现太阳和地球和月亮的运转模型动画 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
效果预览
源代码下载
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;
}
大功告成!
相关推荐:
文章浏览阅读4.6k次。如前面所述,虽然Python代码通过了解释,但是在执行时仍有可能触发错误,而这类的错误就称为异常。大部分异常会导致程序无法继续执行。一旦程序运行后发现有异常,Python会直接显示异常的信息,通常包括:异常出现的地方、异常的类型和内容。如下:我们可以看到上述示例中的异常类型依次是:ZeroDivisionError, NameError 和 TypeError。_python 异常
文章浏览阅读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行第二个字符是空格
文章浏览阅读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提取特定数据
文章浏览阅读1.1k次,点赞8次,收藏3次。在当今的数字时代,我们的移动设备占据了我们生活的很大一部分。从令人难忘的照片和视频到重要的文档和消息,我们的 iOS 设备存储了大量我们无法承受丢失的数据。然而,事故时有发生,无论是由于软件故障、无意删除,甚至是硬件损坏,丢失数据都可能令人痛苦。值得庆幸的是,许多数据恢复工具是专门为 iOS 设备设计的。这些工具是检索丢失或删除的文件的最佳选择。_奇客数据恢复ios版
文章浏览阅读2.2k次。单片机计数器实验报告单片机计数器实验报告计数器实验报告㈠ 实验目的学习单片机内部定时/计数器的使用和编程方法;进一步掌握中断处理程序的编程方法。㈡ 实验器材G6W仿真器一台MCS—51实验板一台PC机一台电源 一台信号发生器一台㈢ 实验内容及要求8051内部定时计数器,按计数器模式和方式1工作,对P3.4(T0)引脚进行计数,使用8051的T1作定时器,50ms中断..._脉冲计数器实验报告
文章浏览阅读1.3k次。微信小程序自动的swiper大家都知道默认高度是150px,如果需要去修改高度,我在网上看到的方式都是用js去动态算高度,今天给大家提供一种新的思路 使用 swiper+scroll-view css使用display:flex 父元素dingy flex:1废话不多说 直接上代码 :wxml:<!--pages/talentedPeople/talentS..._微信小程序swiper高度不固定,允许上下滑动
文章浏览阅读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
文章浏览阅读119次。1.linux中用户的类型 linux中用户组的类型 linux中存储用户信息的文件是哪个?且其中的字段是什么意思 linux中存储组信息的文件是哪个?且其中的字段是什么意思?2.创建下列用户、组和组成员资格:(1)创建名为 sysmgrs 的组(2)创建用户 natasha 同时指定sysmgrs作为natasha的附加组(3)创建用户 harry 同时指定 sysmgrs作为harry的附加组(4)创建用户 sarah 指定shell类型为/sbin/fals..._sysmgrs
文章浏览阅读277次。2017国培计划教学设计教学工作任重而道远,面对国培教学内容,希望与挑战并存。下面是学习啦小编为大家整理的2017国培计划教学设计,供大家阅读!2017国培计划教学设计篇1一、指导思想以“提高教学质量”为核心,以“新课程有效教学”为抓手,以校本研修提高教师专业素质为突破口,以远教资源应用为主渠道,以高效课堂为重点,深入开展教学研究,树立“以学生发展为本”的教育思想,不断更新教学观念,改变教师的教学..._音乐提交一份使用信息技术进行教育教学的教学设计,该设计中包括主题、教学对象及
文章浏览阅读1.1k次。公司做的app需要做IAP订阅支付,自己做完总结一下,希望对小伙伴们有帮助我就很欣慰了。代码写的不好 不要喷我。首先讲一下我的业务逻辑:先上图下面详细讲一下,作为服务端具体要做些什么,并贴上对应的代码:第一步:通过客户端传过来的recept(票据)进行生成订单的操作【注意这里需要验证订单是否已存在】,订单生成返回客户端相关信息; public function pay() { $uid = $this->request->header('uid'); _php 苹果续费退款回调处理
文章浏览阅读337次。近日,广东印发知识产权人才“十四五”规划,全面加强广东知识产权人才队伍建设,完善知识产权人才结构,拓宽知识产权人才培养渠道,健全知识产权人才评价激励和流动配置机制,优化知识产权人才工作环境,为广东高质量发展提供坚实的知识产权人才支撑。 《规划》紧抓“双区”建设和两个合作区建设重大历史机遇,牢固确立人才是第一资源理念,紧紧围绕建设知识产权强国先行示范省需求,健全知识产权人才评价激励和流动配置机制,优化知识产权人才工作环境,结合广东经济社会发展实际,着眼知识产权与科技创新、产业发展、商贸融合的发展趋势,将_优化知识产权人才激励制度
文章浏览阅读508次。TreeTree的定义树(tree)定义在 ul 元素中。该标记可定义叶节点和子节点。节点将是 ul 列表内的 li 元素。<ul id="tt" class="easyui-tree"> <li> <span>Folder</span> <ul> <li> <span>Sub..._jquery easyui tree