2D類比實現摩天輪旋轉動畫特效

最後更新：2018-03-22 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

先看：

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

代碼：

<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;}      .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>  </head>  <body>      <p class="p1">          <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">                 </p>  </body>  </html></span>

摩天輪原圖：

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

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

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

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More