2D模拟实现摩天轮旋转动画特效

这次给大家带来2D模拟实现摩天轮旋转动画特效，使用2D模拟实现摩天轮旋转动画特效的注意事项有哪些，下面就是实战案例，一起来看一下。

先看效果图：

由于上传的大小原因，只能录制成这种效果，原图是无限循环的转圈。

代码：

                            *{margin:0;padding:0;}      .image{width:80px;height:80px;}      .image1{width:620px;height:620px;}      .p1{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)}            }                
                                                                   
    

登录后复制

 摩天轮原图：

注释：transform-origin 属性允许您改变被转换元素的位置。

这个属性主要的作用就是选择一个位置，然后绕着这个位置旋转。

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

IE8下的nth-child()兼容问题如何处理

CSS3的box-sizing属性图文教程

在CSS边界线消失如何处理

实现多背景模拟动态边框

以上就是2D模拟实现摩天轮旋转动画特效的详细内容，更多请关注【创想鸟】其它相关文章！