css抖动基础
<!doctype html>
<html lang="en"><head>
<meta charset="UTF-8">
<tilte>Document</title>
<style>
@-webkit-keyframes buzz-out{
0%{
-webkit-transform:translateX(10px)rotate(20deg);
}
30%{
-webkit-transform:tranalateX(-10px)rotate(-20deg);
}
60%{
-webkit-transform:translateX(30px)rotate(50deg);
}
100%{
-webkit-transform:translateX(-30px)rotate(-50deg);
}
}
#buzz{
width:1000px;
height:400px;
margin:200px;
background:#eee1e1;
position:relative;
}
#buzz:hover {
-webkit-animation-name:buzz-out;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:100;
}
</style>
</head>
<body>
<div id="buzz">
<p></p>
</div>
</body>
</html>
以上是代码。
有关属性：animation
animation-name:规定需要绑定到选择器keyframe名称
animation-duration:规定花费的时间以秒或毫秒记
animation-timing-fuction:规定动画速度曲线
animation-delay:规定开始之前的延迟
animation-iteration-count:规定动画应播放的次数
animation-direction:规定是否应该轮流反向播放动画
@-webkit-keyframes buzz-out{
0%{
-webkit-transform:translateX(10px)rotate(20deg);
}
30%{
-webkit-transform:tranalateX(-10px)rotate(-20deg);
}
60%{
-webkit-transform:translateX(30px)rotate(50deg);
}
100%{
-webkit-transform:translateX(-30px)rotate(-50deg);
}
}
这里可以设置抖动的幅度
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
