本文摘自PHP中文网,作者php中世界最好的语言,侵删。
这次给大家带来h5和c3怎样做出太阳系行星运转的动画效果,用h5和c3做出太阳系行星运转动画效果的注意事项有哪些,下面就是实战案例,一起来看一下。做一个太阳系八大行星的运转动画,不包括行星的卫星,所有行星围绕太阳公转,行星采用纯色,暂时没有自转。
动画中包括:太阳及各行星,运行轨道,行星公转动画。
先画好草图,设计好大小和位置,根据公转周期计算好动画执行的时间。
html的结构:
一个class为solarsys的div,作为太阳系容器元素,该div的position为relative。
行星轨道和行星都用div,position为absolute。
容器用relative和内部元素采用absolute的定位方式,比较简单的能实现效果,缺点就是大小是固定的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | < div class = "solarsys" >
< div class = 'sun' ></ div >
< div class = 'mercuryOrbit' ></ div >
< div class = 'mercury' ></ div >
< div class = 'venusOrbit' ></ div >
< div class = 'venus' ></ div >
< div class = 'earthOrbit' ></ div >
< div class = 'earth' ></ div >
< div class = 'marsOrbit' ></ div >
< div class = 'mars' ></ div >
< div class = 'jupiterOrbit' ></ div >
< div class = 'jupiter' ></ div >
< div class = 'saturnOrbit' ></ div >
< div class = 'saturn' ></ div >
< div class = 'uranusOrbit' ></ div >
< div class = 'uranus' ></ div >
< div class = 'neptuneOrbit' ></ div >
< div class = 'neptune' ></ div >
</ div >
|
太阳系容器div的css:
定宽,定高,relative定位,页面内剧中对齐。
1 2 3 4 5 6 7 8 9 | .solarsys{
width: 800px;
height: 800px;;
position: relative;
margin: 0 auto;
background-color: #000000;
padding: 0;
transform: scale(1);
}
|
太阳div的css:
按照设计的大小和位置,设定宽高,left,top。
设定颜色。
通过把boder-radius生成50%,把一个正方形变成圆形。
通过box-shadow的4层颜色设置实现太阳光晕。
1 2 3 4 5 6 7 8 9 10 11 | .sun {
left:357px;
top:357px;
height: 90px;
width: 90px;
background-color: rgb(248,107,35);
border-radius: 50%;
box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);
position: absolute;
margin: 0;
}
|
行星轨道div的css:
假设是水星轨道。
按照设计的大小和位置,设定宽高,left,top。
背景色透明。
通过把boder-radius生成50%,把一个正方形变成圆形。
boder的类型设成虚线。
boder的颜色设成灰色。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .mercuryOrbit {
left:342.5px;
top:342.5px;
height: 115px;
width: 115px;
background-color: transparent;
border-radius: 50%;
border-style: dashed;
border-color: gray;
position: absolute;
border-width: 1px;
margin: 0px;
padding: 0px;
}
|
相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
关于HTML操作滚动条的方法
html如何制作细线表格
html块级标签,行内标签,行内块标签的显示模式有哪些
以上就是h5和c3怎样做出太阳系行星运转的动画效果的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5获取手机gps信息的示例代码
HTML5之title吸顶功能
HTML5 canvas绘制时指定颜色与透明度的方法
HTML5 manifest离线缓存的示例代码
iconfont图标引用的方法步骤(代码)
HTML5 canvas基本绘图之绘制阴影效果
详解HTML5地理定位与第三方工具百度地图的应用
HTML5移动端-viewport的详解
h5制作虚拟键盘时出现输入框遮挡的情况怎么办?
在div中img,span怎样可以做出垂直居中
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » h5和c3怎样做出太阳系行星运转的动画效果