转载

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实现围绕任何点来旋转-京东推荐动画

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

本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=176 ,欢迎大家传播与分享.

正文到此结束
Loading...