2D模擬實現摩天輪旋轉動畫特效

這次帶給大家2D模擬實現摩天輪旋轉動畫特效，使用2D模擬實現摩天輪旋轉動畫特效的注意事項有哪些，下面就是實戰案例，一起來看一下。

先看效果圖：

由於上傳的大小原因，只能錄製成這種效果，原圖是無限循環的轉圈。

程式碼：

<span>nbsp;html>  
  
  
    <meta>  
    <title>模拟摩天轮动画</title>  
    <style>  
    *{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)}    
        }  
    </style>  
  
  
    <p>  
        <img  class="image1 lazy" src="/static/imghwm/default1.png" data-src="1.png" alt="2D模擬實現摩天輪旋轉動畫特效" >  
        <img  class="image lazy" src="/static/imghwm/default1.png" data-src="1.jpg" alt="2D模擬實現摩天輪旋轉動畫特效" >  
        <img  class="image lazy" src="/static/imghwm/default1.png" data-src="2.jpg" alt="2D模擬實現摩天輪旋轉動畫特效" >  
        <img  class="image lazy" src="/static/imghwm/default1.png" data-src="3.jpg" alt="2D模擬實現摩天輪旋轉動畫特效" >  
        <img  class="image lazy" src="/static/imghwm/default1.png" data-src="4.jpg" alt="2D模擬實現摩天輪旋轉動畫特效" >   
          
    </p>  
  
</span>

 摩天輪原圖：

註解：transform -origin 屬性允許您改變被轉換元素的位置。

這個屬性主要的作用就是選擇一個位置，然後繞著這個位置旋轉。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

IE8下的nth-child()相容問題如何處理

CSS3的box-sizing屬性圖文教學

在CSS邊界線消失如何處理

實作多背景模擬動態邊框

以上是2D模擬實現摩天輪旋轉動畫特效的詳細內容。更多資訊請關注PHP中文網其他相關文章！