之前在京东首页看到一个推荐动画
觉得还是可以试试使用.其实整个效果还是比较简单的.主要还是控制动画的运作原点.
在这个动画里,我觉得比较有意思的就是这个黑点的旋转.我们这次就来实现这个效果.以为其他效果都是没难度的
我们先来看完整代码
<!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, 0, 0); } to { transform:rotate(360deg, 0, 0); } } @keyframes inner-circle{ from{ transform: rotate(360deg, 0, 0); } } </style> </head> <body> <div> <div>?</div> </div> </body> </html>
重点的代码讲解
1. 设置移动外层的样式,其实外观主要是这个div
body>div
2. 重点主要在下面CSS里,设置运动的原点坐标,改变这里就可以
transform-origin: 0% 300%;
3. div>div 的CSS动画主要是保证笑脸摆正.如果不需要,当然是可以不用设置其样式的.
其实整个代码是非常简单的.要实现整个京东的那个推荐动画.大家可以尝试做一下,理解下动画.