html5 星际摩托,HTML5 星际陨石环绕动效
CSS
语言：
CSSSCSS
确定
/* moving orbits */
body{background:#211;}
#orbits {
position: absolute;
text-align: center;
height: 556px;
width: 549px;
left: calc(50% - 274px);
z-index: -99;
top: 35px;
background: url(/uploads/150801/globe.png) no-repeat;
}
div.orbits:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
div.orbit:after {
-webkit-animation: planet-rotate 4s linear infinite;
-moz-animation: planet-rotate 4s linear infinite;
animation: planet-rotate 4s linear infinite;
background-color: #211a00;
border-radius: 50%;
content: '';
display: block;
}
div.orbit {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div.orbit:nth-of-type(1) {
-webkit-animation: orbit-rotate 4s linear infinite;
-moz-animation: orbit-rotate 4s linear infinite;
animation: orbit-rotate 4s linear infinite;
-webkit-animation-delay: -2.72s;
-moz-animation-delay: -2.72s;
animation-delay: -2.72s;
position: absolute;
top: 58.4%;
left: -9.4%;
width: 118.8%;
}
div.orbit:nth-of-type(1):after {
-webkit-animation-delay: -2.72s;
-moz-animation-delay: -2.72s;
animation-delay: -2.72s;
height: 81px;
width: 66px;
background: url(/uploads/150801/01.png) no-repeat;
}
div.orbit:nth-of-type(2) {
-webkit-animation: orbit-rotate 4s linear infinite;
-moz-animation: orbit-rotate 4s linear infinite;
animation: orbit-rotate 4s linear infinite;
-webkit-animation-delay: -0.12s;
-moz-animation-delay: -0.12s;
animation-delay: -0.12s;
position: absolute;
top: 87.8%;
left: -0.4%;
width: 100.8%;
}
div.orbit:nth-of-type(2):after {
-webkit-animation-delay: -0.12s;
-moz-animation-delay: -0.12s;
animation-delay: -0.12s;
height: 30px;
width: 31px;
background: url(/uploads/150801/02.png) no-repeat;
}
div.orbit:nth-of-type(3) {
-webkit-animation: orbit-rotate 4s linear infinite;
-moz-animation: orbit-rotate 4s linear infinite;
animation: orbit-rotate 4s linear infinite;
-webkit-animation-delay: -0.92s;
-moz-animation-delay: -0.92s;
animation-delay: -0.92s;
position: absolute;
top: 47.2%;
left: -10%;
width: 120%;
}
div.orbit:nth-of-type(3):after {
-webkit-animation-delay: -0.92s;
-moz-animation-delay: -0.92s;
animation-delay: -0.92s;
height: 17px;
width: 13px;
background: url(/uploads/150801/03.png) no-repeat;
}
div.orbit:nth-of-type(4) {
-webkit-animation: orbit-rotate 4s linear infinite;
-moz-animation: orbit-rotate 4s linear infinite;
animation: orbit-rotate 4s linear infinite;
-webkit-animation-delay: -1.44s;
-moz-animation-delay: -1.44s;
animation-delay: -1.44s;
position: absolute;
top: 40.2%;
left: -9.4%;
width: 118.8%;
}
div.orbit:nth-of-type(4):after {
-webkit-animation-delay: -1.44s;
-moz-animation-delay: -1.44s;
animation-delay: -1.44s;
height: 17px;
width: 11px;
background: url(/uploads/150801/04.png) no-repeat;
}
div.orbit:nth-of-type(5) {
-webkit-animation: orbit-rotate 4s linear infinite;
-moz-animation: orbit-rotate 4s linear infinite;
animation: orbit-rotate 4s linear infinite;
-webkit-animation-delay: -2.88s;
-moz-animation-delay: -2.88s;
animation-delay: -2.88s;
position: absolute;
top: 17.8%;
left: -3.4%;
width: 106.8%;
}
div.orbit:nth-of-type(5):after {
-webkit-animation-delay: -2.88s;
-moz-animation-delay: -2.88s;
animation-delay: -2.88s;
height: 20px;
width: 19px;
background: url(/uploads/150801/05.png) no-repeat;
}
div.orbit:nth-of-type(6) {
-webkit-animation: orbit-rotate 4s linear infinite;
-moz-animation: orbit-rotate 4s linear infinite;
animation: orbit-rotate 4s linear infinite;
-webkit-animation-delay: -0.68s;
-moz-animation-delay: -0.68s;
animation-delay: -0.68s;
position: absolute;
top: 13.6%;
left: -1.6%;
width: 103.2%;
}
div.orbit:nth-of-type(6):after {
-webkit-animation-delay: -0.68s;
-moz-animation-delay: -0.68s;
animation-delay: -0.68s;
height: 13px;
width: 12px;
background: url(/uploads/150801/06.png) no-repeat;
}
div.orbit:nth-of-type(7) {
-webkit-animation: orbit-rotate 4s linear infinite;
-moz-animation: orbit-rotate 4s linear infinite;
animation: orbit-rotate 4s linear infinite;
-webkit-animation-delay: -2.24s;
-moz-animation-delay: -2.24s;
animation-delay: -2.24s;
position: absolute;
top: -0.4%;
left: 8.6%;
width: 82.8%;
}
div.orbit:nth-of-type(7):after {
-webkit-animation-delay: -2.24s;
-moz-animation-delay: -2.24s;
animation-delay: -2.24s;
height: 26px;
width: 24px;
background: url(/uploads/150801/07.png) no-repeat;
}
div.orbit:nth-of-type(8) {
-webkit-animation: orbit-rotate 4s linear infinite;
-moz-animation: orbit-rotate 4s linear infinite;
animation: orbit-rotate 4s linear infinite;
-webkit-animation-delay: -2s;
-moz-animation-delay: -2s;
animation-delay: -2s;
position: absolute;
top: -14.4%;
left: 26.6%;
width: 46.8%;
}
div.orbit:nth-of-type(8):after {
-webkit-animation-delay: -2s;
-moz-animation-delay: -2s;
animation-delay: -2s;
height: 16px;
width: 15px;
background: url(/uploads/150801/08.png) no-repeat;
}
@-webkit-keyframes orbit-rotate {
from {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@-moz-keyframes orbit-rotate {
from {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@-o-keyframes orbit-rotate {
from {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes orbit-rotate {
from {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@-webkit-keyframes planet-rotate {
from {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
-o-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
@-moz-keyframes planet-rotate {
from {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
-o-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
@-o-keyframes planet-rotate {
from {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
-o-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
@keyframes planet-rotate {
from {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
-o-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
html5 星际摩托,HTML5 星际陨石环绕动效相关推荐
- html表单的边界,HTML5 表单提交时的边界环绕动效
CSS 语言: CSSSCSS 确定 @import url(http://fonts.googleapis.com/css?family=Economica:400,700); * { box-si ...
- html 设置div占位符,HTML5+CSS3 一组文本输入框占位符动效
CSS 语言: CSSSCSS 确定 body { color: #666; font-family: Arial, Helvetica, sans-serif; } html { box-sizin ...
- html文本弹性,HTML5 很有趣的文本蹦床/弹性弯曲动效
CSS 语言: CSSSCSS 确定 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,300); html, ...
- HTML5培训教程学习之动效制作
近年来,HTML5应用愈发广泛,并有取代Flash的趋势.很多人知道利用HTML5可以做出好的动作效果,但你知道它是怎么做出来的吗?今天小千就来给大家分享一下HTML5培训教程中动效制作的几种方法. ...
- 前端实现炫酷动效_最好的H5动效视频教程：HTML5炫酷动效案例
一个元素,动态的往往比静态的更能吸引人们的注意力,由此推之,一个操作界面,活泼的动效交互反馈将会给用户带来更好的操作体验和感知.小到APP的Loading动画,大到各大网站炫酷的H5运营页的展现,可以 ...
- html5作品展示的动效,HTML5 动效的常见制作方法
智唯网络为你推出众所周知,HTML5 动效的常见制作方法.一个元素,动往往比静更吸引眼球;一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验;一个H5运营宣传页,炫酷的动画特效定能助力传播和品 ...
- 【前端实例代码】Html5+css3+JavaScript实现新拟态新拟物风格(Neumorphism)图标按钮动效网页效果~手把手教学~新手必会~超简单 ~
b站视频演示效果: 效果图: 完整代码: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
- 在html画一个自动缩放圆环,使用html5 canvas绘制圆环动效
最近笔者有个需求,需求内容为:一组文字显示在圆环的周围,用户可添加文字,文字围绕着圆环,每个词对应圆环周围的的蓝色小圆点,当用户鼠标放在圆环上方小蓝点时时,实现放射出三角形,再显示出文字,先看看动图效 ...
- html5作品展示的动效,html5动效系列八：8个非常神奇的HTML5动画和应用
每一个扁平化界面设计,都是我们的心灵碰撞致力于最棒的 metro ui 设计 今天我们继续来为大家分享一些效果相当不错的 1.CSS3图片悬停放大 今天我们要来分享一款很酷的CSS3图片,这款图片可以 ...
- 站酷用HTML5播放视频,站酷：动效展示实践的问题及解决
前两天设计一款主页,想给它加上一些操作演示,于是便自己琢磨如何实现.先上效果图: 首先,是界面设计的部分: 需求是针对现有的网站做移动端的展示.针对门户网站的性质,以及对象的行业特性,将首页直接体现的 ...
最新文章
- 分布式架构知识体系必读
- python动态柱状图_python – 在Jupyter中使用plotly以离线模式创建动画图表
- linux uvc协议_linux使用UVC采集数据
- 用eval在txt中存储list,dict,tuple
- jenkins linux 发邮件,jenkins——邮件配置
- typora绑定github博客_零基础搭建个人博客
- 自我介绍（老师作业，大神自行忽略）
- 利用bwm-ng 实时监控系统
- 《OpenACC并行程序设计：性能优化实践指南》一 第2章 性能导向开发
- weex官方demo weex-hackernews代码解读(上)
- C语言存储误差,C语言实现测量数据误差处理
- 广州科二化龙考场_广州市机动车驾驶人化龙考场交通路线攻略
- Matlab实现图像识别（九）
- 精 挑 细 选 http://acm.nyist.net/JudgeOnline/problem.php?pid=263
- 移远M26 GSM实时获取网络时间
- 【GDOI2018模拟7.14】小奇的糖果
- 论文格式word修改方法汇总
- git push简介
- laravel物流地址查询
- 爬取电影网站链接并进入网盘通过验证码下载的python（未完成）