- A+
所属分类：HTML5+CSS3
前天写过一篇文章 "CSS3实现围绕任何点来旋转",主要是实现围绕点来旋转.
今天我们继续用另外一种方式实现.
我们先来看代码
HTML
1 | <div class="smile">☺</div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .smile { margin: 100 px auto; width: 80 px; height: 80 px; font - size: 80 px; animation: action 10 s linear infinite; } @keyframes action { from { transform: rotate(0 deg) translate(100 px) rotate(0 deg); } to { transform: rotate(360 deg) translate(100 px) rotate(-360 deg); } } |
其实从代码量来说,比之前的简化了不少. HTML使用的只有一个标签,也只使用了一个动画.
我们主要还是从动画入手, 在这里transform里面我们加入了三种动画,第一种和 第三保证的是笑脸能够旋转起来,保证笑脸是正脸.
如果不需要正脸,可以去掉一个.
中间那个动画是平移动画,也就是在选择的同时,笑脸做平移运动.这样就形成了围绕旋转运动.
要确定这个围绕点,得控制笑脸的位置,我这里的代码就直接是用margin来控制的.如果需要设置不同的点,可以使用定位来控制位置.这样灵活一点.(代码大家就可以自己敲一下,试一下效果)
我的微信公众号
我的微信公众号扫一扫
