CSS3 2D模拟实现摩天轮旋转效果
2016-11-16 16:59
711 查看
先看效果图:
![](http://files.jb51.net/file_images/article/201611/20161116170501695.gif?2016101617512)
由于上传的大小原因,只能录制成这种效果,原图是无限循环的转圈。
代码:
摩天轮原图:
![](http://files.jb51.net/file_images/article/201611/20161116170340660.jpg?2016101617356)
注释:transform-origin 属性允许您改变被转换元素的位置。
这个属性主要的作用就是选择一个位置,然后绕着这个位置旋转。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
![](http://files.jb51.net/file_images/article/201611/20161116170501695.gif?2016101617512)
由于上传的大小原因,只能录制成这种效果,原图是无限循环的转圈。
代码:
<span style="font-size:18px;"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>模拟摩天轮动画</title> <style> *{margin:0;padding:0;} .image{width:80px;height:80px;} .image1{width:620px;height:620px;} .div1{position:relative;margin:10px auto;width:638px; animation:run 20s linear infinite; -webkit-animation:run 20s linear infinite; -moz-animation:run 20s linear infinite; -o-animation:run 20s linear infinite; } img:nth-child(2){ position:absolute;top:25px;left:270px;opacity:0.7; animation:run2 20s linear infinite; -webkit-animation:run2 20s linear infinite; -moz-animation:run2 20s linear infinite; -o-animation:run2 20s linear infinite; transform-origin:top center; -webkit-transform-origin:top center; -moz-transform-origin:top center; -o-transform-origin:top center; } img:nth-child(3){ position:absolute;top:580px;left:270px;opacity:0.7; animation:run2 20s linear infinite; -webkit-animation:run2 20s linear infinite; -moz-animation:run2 20s linear infinite; -o-animation:run2 20s linear infinite; transform-origin:top center; -webkit-transform-origin:top center; -moz-transform-origin:top center; -o-transform-origin:top center; } img:nth-child(4){ position:absolute;top:300px;left:550px;opacity:0.7; animation:run2 20s linear infinite; -webkit-animation:run2 20s linear infinite; -moz-animation:run2 20s linear infinite; -o-animation:run2 20s linear infinite; transform-origin:top center; -webkit-transform-origin:top center; -moz-transform-origin:top center; -o-transform-origin:top center; } img:nth-child(5){ position:absolute;top:300px;left:0px;opacity:0.7; animation:run2 20s linear infinite; -webkit-animation:run2 20s linear infinite; -moz-animation:run2 20s linear infinite; -o-animation:run2 20s linear infinite; transform-origin:top center; -webkit-transform-origin:top center; -moz-transform-origin:top center; -o-transform-origin:top center; } @keyframes run { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} } @-webkit-keyframes run { 0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg)} } @-moz-keyframes run { 0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(360deg)} } @-o-keyframes run { 0%{-o-transform:rotate(0deg)} 100%{-o-transform:rotate(360deg)} } @keyframes run2 { 0%{transform:rotate(0deg)} 100%{transform:rotate(-360deg)} } @-webkit-keyframes run2 { 0%{-webkit-transform:rotate(0deg)} 100%{-webkit-transform:rotate(-360deg)} } @-moz-keyframes run2 { 0%{-moz-transform:rotate(0deg)} 100%{-moz-transform:rotate(-360deg)} } @-o-keyframes run2 { 0%{-o-transform:rotate(0deg)} 100%{-o-transform:rotate(-360deg)} } </style> </head> <body> <div class="div1"> <img src="1.png" class="image1"> <img src="1.jpg" class="image"> <img src="2.jpg" class="image"> <img src="3.jpg" class="image"> <img src="4.jpg" class="image"> </div> </body> </html></span>
摩天轮原图:
![](http://files.jb51.net/file_images/article/201611/20161116170340660.jpg?2016101617356)
注释:transform-origin 属性允许您改变被转换元素的位置。
这个属性主要的作用就是选择一个位置,然后绕着这个位置旋转。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章推荐
- jQuery和css3实现的摩天轮旋转效果
- CSS3 2D模拟摩天轮旋转
- 纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
- CSS3 transform实现图片旋转木马3D浏览效果
- 模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果)
- ie 滤镜旋转 div 实现css3的效果
- CSS3实现一个鼠标跟随动态旋转效果
- CSS3边框旋转动画实现效果
- CSS3 3D效果 实现一个可旋转的正方体
- CSS3 transform:rotate(deg) 2D旋转效果
- css3 2D和3D旋转效果
- css3实现图片旋转效果
- CSS3实现多背景模拟动态边框的效果
- css3-transform-matrix 即矩阵实现物体旋转、缩放、移动效果
- 纯css3实现立方体旋转效果
- css3平移、旋转、倾斜、缩放、动画效果的实现
- css3 js实现3D旋转效果
- html5+css3实现2D动画效果演示
- CSS3三维旋转模拟书本翻页效果
- CSS3实现3D立方体旋转效果