CSS3实现围绕任何点来旋转-续_html/css_WEB-ITnose
今天我们继续用另外一种方式实现.
我们先来看代码
Html
☺
Css
.smile{
margin:100px auto;
width: 80px;
height: 80px;
font-size: 80px;
animation: action 10s linear infinite;
}
@keyframes action {
from {
transform: rotate(0deg) translate(100px) rotate(0deg);
}
to {
transform: rotate(360deg) translate(100px) rotate(-360deg);
}
}
其实从代码量来说,比之前的简化了不少. HTML使用的只有一个标签,也只使用了一个动画.
我们主要还是从动画入手, 在这里transform里面我们加入了三种动画,第一种和 第三保证的是笑脸能够旋转起来,保证笑脸是正脸.
如果不需要正脸,可以去掉一个.
中间那个动画是平移动画,也就是在选择的同时,笑脸做平移运动.这样就形成了围绕旋转运动.
要确定这个围绕点,得控制笑脸的位置,我这里的代码就直接是用margin来控制的.如果需要设置不同的点,可以使用定位来控制位置.这样灵活一点.(代码大家就可以自己敲一下,试一下效果)
本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=178 ,欢迎大家传播与分享.
上一篇: php 等比例缩小图片
下一篇: mysql分表问题
推荐阅读
-
CSS3实现的3D旋转效果_html/css_WEB-ITnose
-
一款纯css3实现的发光屏幕旋转特效_html/css_WEB-ITnose
-
CSS3实现的3D旋转代码实例_html/css_WEB-ITnose
-
CSS3实现围绕任何点来旋转-京东推荐动画_html/css_WEB-ITnose
-
使用纯CSS3实现一个3D旋转的书本_html/css_WEB-ITnose
-
CSS3实现围绕任何点来旋转-续_html/css_WEB-ITnose
-
CSS3实现的3D旋转代码实例_html/css_WEB-ITnose
-
CSS3实现围绕任何点来旋转-京东推荐动画_html/css_WEB-ITnose
-
CSS3实现围绕任何点来旋转-续_html/css_WEB-ITnose
-
一款纯css3实现的发光屏幕旋转特效_html/css_WEB-ITnose