CSS3實現圍繞任何點來旋轉-京東推薦動畫

jopen 10年前發布 | 20K 次閱讀 CSS3 CSS 前端技術

之前在京東首頁看到一個推薦動畫

覺得還是可以試試使用.其實整個效果還是比較簡單的.主要還是控制動畫的運作原點.

在這個動畫里,我覺得比較有意思的就是這個黑點的旋轉.我們這次就來實現這個效果.以為其他效果都是沒難度的

我們先來看完整代碼

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>動畫</title>
   <style>
      body>div{
          width:100px;
          height:100px;
          margin: 20px auto 0;
          color:orange;
          font-size:100px;
          line-height:1;
          animation: circle 5s linear 0s infinite;
          transform-origin: 0% 300%;
      }
      div>div{
          animation: inner-circle 5s linear 0s infinite;
      }
      @keyframes circle {
          from { transform:rotate(0deg); }
          to { transform:rotate(360deg); }
      }
      @keyframes inner-circle{
           from{
               transform: rotate(360deg);
           }
       }
   </style>
</head>
<body>
  <div>
      <div>?</div>
  </div>
</body>
</html>

重點的代碼講解

1. 設置移動外層的樣式,其實外觀主要是這個div

body>div

2. 重點主要在下面CSS里,設置運動的原點坐標,改變這里就可以

transform-origin: 0% 300%;

3. div>div 的CSS動畫主要是保證笑臉擺正.如果不需要,當然是可以不用設置其樣式的.


其實整個代碼是非常簡單的.要實現整個京東的那個推薦動畫.大家可以嘗試做一下,理解下動畫.

本文屬于吳統威的博客, 微信公眾號:bianchengderen,QQ群:186659233 的原創文章,轉載時請注明出處及相應鏈接:http://www.wutongwei.com/front/infor_showone.tweb?id=176 ,歡迎大家傳播與分享.

來自： http://www.wutongwei.com/front/infor_showone.tweb?id=176

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！