CSS3实现的文字悬浮动态摇摆效果
css3吧
全部回复
仅看楼主
level 3
people2net 楼主
使用Keyframe实现,主要代码如下:
/* 定义鼠标悬浮动画元素 */
.yaobai:hover{
-webkit-animation: dese .75s linear infinite;
-moz-animation: dese .75s linear infinite;
-ms-animation: dese .75s linear infinite;
-o-animation: dese .75s linear infinite;
animation: dese .75s linear infinite;
}
/* 定义keyframe动画效果:嘚瑟 */
@keyframes dese{
0% { transform: rotate(-12deg); } /* 添加旋转角度,以下类似 */
20% { transform: rotate(8deg); }
30% { transform: rotate(6deg); }
40% { transform: rotate(3deg); }
55% { transform: rotate(0deg); }
70% { transform: rotate(-4deg); }
80% { transform: rotate(7deg); }
90% { transform: rotate(-8deg); }
90% { transform: rotate(12deg); }
}
想看看动画效果代码如何书写的过程,参考这个录制的代码编写过程吧:
http://www.gbtags.com/gb/rtreplayerpreview/97.htm
2014年09月18日 15点09分 1
1