[css3] 看博客学习别人的旋转的星球
定义一个div 太阳轨道sunline,边框显示出来,定义position为relative
#sunline{
width: 500px;
height: 500px;
border:2px solid #000;
border-radius: 50%;
margin:50px auto;
position: relative;
animation:sunRotate 5s;
}
定义一个div 太阳sun,把红太阳放在中间,居中显示,定义position为absolute,
距左50%,剧上50%,左边距负的宽度的一半,上边距负的高度的一半
#sun{
background: red;
width: 150px;
height: 150px;
position: absolute;
left: 50%;
top:50%;
margin-left:-75px;
margin-top: -75px;
border-radius: 50%;
}
定义一个地球的轨道 earthline,边框显示出来,定义position为absolute,距左50%,剧上负的高度一半,左边距负的宽度的一半
#earthline{
width: 200px;
height: 200px;
border:1px solid #000;
border-radius: 50%;
position: absolute;
left: 50%;
top: -100px;
margin-left: -100px;
}
定义一个div 地球 earth,把地球放在水平居中,太阳轨道垂直地球居中,定义position为absolute,距左50%,剧上50%,左边距负的宽度的一半,上边距负的高度的一半
#earth{
background: green;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;
}
定义一个月球moon,定义position为absolute,距左50%,剧上负的高度一半,左边距负的宽度的一半
#moon{
width: 40px;
height: 40px;
background: blue;
border-radius: 50%;
position: absolute;
left: 50%;
margin-left: -20px;
top: -20px;
}
定义动画@keyframes,100%的进度的时候,旋转一圈
@keyframes sunRotate{
100%{
transform:rotate(360deg);
}
}
为太阳轨道sunline绑定动画,使用属性animation,参数:规则名称,执行时间,速度曲线,延迟时间,播放次数,是否反向
animation:sunRotate 10s linear 0s infinite;
速度曲线: linear(线性匀速) ease(缓动)
播放次数:infinite(无限次数)
为地球轨道earthline绑定动画
animation:sunRotate 5s linear 0s infinite; 运行时间不一样,这个快
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> #sunline{ width: 500px; height: 500px; border:2px solid #000; border-radius: 50%; margin:100px auto; position: relative; animation:sunRotate 10s linear 0s infinite; } #sun{ background: red; width: 150px; height: 150px; position: absolute; left: 50%; top:50%; margin-left:-75px; margin-top: -75px; border-radius: 50%; } #earthline{ width: 200px; height: 200px; border:1px solid #000; border-radius: 50%; position: absolute; left: 50%; top: -100px; margin-left: -100px; animation:sunRotate 5s linear 0s infinite; } #earth{ background: green; width: 100px; height: 100px; border-radius: 50%; position: absolute; left: 50%; margin-left: -50px; top: 50%; margin-top: -50px; } #moon{ width: 40px; height: 40px; background: blue; border-radius: 50%; position: absolute; left: 50%; margin-left: -20px; top: -20px; } @keyframes sunRotate{ 100%{ transform:rotate(360deg); } } </style> </head> <body> <div id="sunline"> <div id="sun"></div> <div id="earthline"> <div id="earth"></div> <div id="moon"></div> </div> </div> </body> </html>
相关文章
- SQLSERVER 的复合索引和包含索引到底有啥区别?
- SQLSERVER 的主键索引真的是物理有序吗?
- SQLSERVER 居然也能调 C# 代码 ?
- 再聊一下那 SQLSERVER 行不能跨页的事
- 聊一聊 SQLSERVER 的行不能跨页
- 一次SQL调优 聊一聊 SQLSERVER 数据页
- 记一次 .NET 某安全生产信息系统 CPU爆高分析
- 记一次 .NET 某工控MES程序 崩溃分析
- 玩好.NET高级调试,你也要会写点汇编
- 记一次 .NET 某工控软件 内存泄露分析
- 记一次 .NET 某电子厂OA系统 非托管内存泄露分析
- 聊一聊如何截获 C# 程序产生的日志
- .NET 7 的 AOT 到底能不能扛反编译?
- 记一次 .NET 某自动化采集软件 崩溃分析
- 从 WinDbg 角度理解 .NET7 的AOT玩法
- 记一次.NET某工控图片上传CPU爆高分析
- WinDBG详解进程初始化dll是如何加载的
- 一个超经典 WinForm 卡死问题的再反思
- 聊一聊对一个 C# 商业程序的反反调试
- 记一次 .NET 某医疗器械 程序崩溃分析