html5——动画案例（太阳系）
太阳系主要利用定位，伪元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} html, body {
width: 100%;
height: 100%;
overflow: hidden;
} body {
background-color: #000;
} .sun {
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-left: -40px;
margin-top: -40px;
background-color: orange;
box-shadow: 0px 0px 30px 2px yellow;
} .earth {
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
border: 1px solid #fff;
animation: gun 10s infinite linear;
} .earth::before {
content: "";
position: absolute;
width: 40px;
height: 40px;
top: 50%;
margin-top: -20px;
left: -20px;
border-radius: 50%;
background-color: blue;
} .moon {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
margin-top: -50px;
left: -50px;
border-radius: 50%;
/*border: 1px solid #fff;*/
animation: gun 2.5s infinite linear;
} .moon:before {
content: "";
position: absolute;
width: 18px;
height: 18px;
top: 50%;
margin-top: -9px;
left: -9px;
border-radius: 50%;
background-color: silver;
} .mars {
width: 460px;
height: 460px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-left: -230px;
margin-top: -230px;
border: 1px solid #fff;
animation: gun 15s infinite linear;
} .mars::before {
content: "";
position: absolute;
width: 50px;
height: 50px;
top: 50%;
margin-top: -25px;
left: -25px;
border-radius: 50%;
background-color: orange;
} .venus {
width: 600px;
height: 600px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -300px;
border: 1px solid #fff;
animation: gun 20s infinite linear;
} .venus::before {
content: "";
position: absolute;
width: 60px;
height: 60px;
top: 50%;
margin-top: -30px;
left: -30px;
border-radius: 50%;
background-color: silver;
} @keyframes gun {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="sun"></div>
<div class="earth">
<div class="moon"></div>
</div>
<div class="mars"></div>
<div class="venus"></div>
</body>
</html>
参考资料：cssRules js操作cssRules
html5——动画案例（太阳系）的更多相关文章
- html5——动画案例（时钟）
1.秒钟转360度需要60s分60步 2.分针转360度需要3600s分60步 3.秒钟转360度需要43200s分60步 <!DOCTYPE html> <html lang=&q ...
- html5——动画案例（无缝滚动）
无缝滚动:是两组拼在一起的 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- html5——动画案例（大海）
太阳的发散效果主要是利用transform: scale(1.3),将物体变大 <!DOCTYPE html> <html lang="en"> <h ...
- 精选19款华丽的HTML5动画和实用案例
下面是本人收集的19款超酷HTML5动画和实用案例,觉得不错,分享给大家. 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天 ...
- 使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
- HTML5 动画效果的多种实现方式
HTML5 动画效果的多种实现方式 1. CSS3 transform + transition https://www.w3.org/TR/css-transforms-1/ https://ww ...
- 给你推荐10款优秀的 HTML5 动画工具
HTML5 在过去三年快速增长,已经成为 Web 开发人员最喜欢的编程语言之一.强大的编程语言拥有开发更好的网页应用的能力. HTML5 中引入的新技术都非常好,像 Chrome.Firefox.Sa ...
- HTML5 Maker – 在线轻松制作 HTML5 动画效果
HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...
- HTML5动画软件工具编辑器 HTML5动画分类 工具推荐
接下来介绍几款制作HTML5动画的工具,它们可以分为几类: 1.导出canvas动画: Flash CC(13.1).Animation.Radi 2.导出DIV+CSS3动画: HTML5 Make ...
随机推荐
- 2.1 shuffle sort(洗牌)
1.目的:将数组以随机的顺序重新排序,类似洗牌的过程 2.用途用于快速排序或者任何以划分为基础的排序中,目的是减少最坏可能性发生的概率. 3.想法1:给数组的每一个元素产生一个随机的数字作为键,然后使 ...
- jsp内置对象(转)
JSP中一共预先定义了9个这样的对象,分别为:request.response.session.application.out.pagecontext.config.page.exception 1. ...
- Win32编程API 基础篇 -- 5.使用资源
使用资源 你可能想参考教程结尾的附近,为了获得跟VC++和BC++资源相关的信息. 在我们讲得更加深入之前,我将大致讲解一下资源的主题,这样在每个小节中我就不必再去重讲一遍了.在这一小节中,你不需要编 ...
- nyoj_79_拦截导弹_201403182040
拦截导弹 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 某国为了防御敌国的导弹袭击,发展中一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到 ...
- qscoj Round 1(div 2)
卿学姐OJ……很休闲啊……? A 分析:枚举/exgcd B 分析:栈模拟 弄个栈模拟配对过程,将能够配对的()位置染色,最后最长的一段染色区间就是答案 C 分析:dp f[i][j]表示前i个物品, ...
- [codevs 2488]绿豆蛙的归宿（拓扑排序）
题目:http://dev.codevs.cn/problem/2488/ 分析:这题有个特殊的地方,就是每个边都有可能走到,所以就是每个边的权值*每个边的概率,所以只要求概率,拓扑一下就可以了.
- RDLC报表总结
这2天纠结的报表基本上已近完成大部分功能.现在总结一下自己近期的学习成果 首先制作微软RDLC报表由以下三部分构成:1.制作自己的DateSet集合(就是报表的数据集):2.制作自己的报表文件.rdl ...
- mybatis表关联彻底理解
1.多张表关联 三张表,用户表,主播表,关注表. 查询用户已经关注的主播的信息,那就要三张表关联起来啊.分别left join联在一起,通过id相同的连接在一起.最后where查找出最终条件. < ...
- DELPHI新版本WEBSERVICE的变化
DELPHI新版本WEBSERVICE,不仅可以编译成ISAPI DLL,依靠IIS部署, 并且还可以编译成单独的EXE,不再依赖IIS就可以独立运行,这一点未尝不可以说是非常方便的改进.
- postgresql备份和恢复
备份: pg_dump -d m3vg -h localhost -p 5432 -U delta -W -f 1024.dump -F tar 恢复: pg_restore -h localhost ...