CSS3实现围绕任何点来旋转(一)-京东推荐动画

  • A+
所属分类:HTML5+CSS3

之前在京东首页看到一个推荐动画CSS3实现围绕任何点来旋转(一)-京东推荐动画

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

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

我们先来看完整代码

<!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动画主要是保证笑脸摆正.如果不需要,当然是可以不用设置其样式的.CSS3实现围绕任何点来旋转(一)-京东推荐动画

其实整个代码是非常简单的.要实现整个京东的那个推荐动画.大家可以尝试做一下,理解下动画.

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar 购买企业邮箱 0

      CSS3实现围绕任何点来旋转-京东推荐动画,看起来效果还不错额,先收藏了