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

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

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

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

我们先来看完整代码

           动画           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);           }       }        
      
☺

      
查看更多关于CSS3实现围绕任何点来旋转-京东推荐动画_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did113914