CSS3实现围绕任何点来旋转-京东推荐动画_html/css

CSS3实现围绕任何点来旋转-京东推荐动画_html/css_WEB-ITnose

WBOY

Lepaskan： 2016-06-21 09:01:11

asal

1217 orang telah melayarinya

之前在京东首页看到一个推荐动画

觉得还是可以试试使用.其实整个效果还是比较简单的.主要还是控制动画的运作原点.

在这个动画里,我觉得比较有意思的就是这个黑点的旋转.我们这次就来实现这个效果.以为其他效果都是没难度的

我们先来看完整代码

<!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>

Salin selepas log masuk