css3动画 如何让网页左右抖动
SongKer 发布时间：2015-08-13 分类：Web 阅读：5266次 添加评论
css3动画，让网页左右抖动，摇一摇，晃动效果。可能是比较笨的做法，欢迎指教...
<style>
body{
animation:shake 1s;
-moz-animation:shake 1s; /* Firefox */
-webkit-animation:shake 1s; /* Safari and Chrome */
-o-animation:shake 1s; /* Opera */
}
@keyframes shake
{
0% {transform: rotate(-20deg);}
10% {transform: rotate(20deg);}
20% {transform: rotate(-20deg);}
30% {transform: rotate(20deg);}
40% {transform: rotate(-15deg);}
50% {transform: rotate(15deg);}
60% {transform: rotate(-10deg);}
70% {transform: rotate(10deg);}
80% {transform: rotate(-15deg);}
90% {transform: rotate(15deg);}
100% {transform: rotate(0deg);}
}
@-moz-keyframes shake /* Firefox */
{
0% {transform: rotate(-20deg);-moz-transform:rotate(-20deg); /* Firefox */}
10% {transform: rotate(20deg);-moz-transform:rotate(20deg); /* Firefox */}
20% {transform: rotate(-20deg);-moz-transform:rotate(-20deg); /* Firefox */}
30% {transform: rotate(20deg);-moz-transform:rotate(20deg); /* Firefox */}
40% {transform: rotate(-15deg);-moz-transform:rotate(-15deg); /* Firefox */}
50% {transform: rotate(15deg);-moz-transform:rotate(15deg); /* Firefox */}
60% {transform: rotate(-10deg);-moz-transform:rotate(-10deg); /* Firefox */}
70% {transform: rotate(10deg);-moz-transform:rotate(10deg); /* Firefox */}
80% {transform: rotate(-15deg);-moz-transform:rotate(-15deg); /* Firefox */}
90% {transform: rotate(15deg);-moz-transform:rotate(15deg); /* Firefox */}
100% {transform: rotate(0deg);-moz-transform:rotate(0deg); /* Firefox */}
}
@-webkit-keyframes shake /* Safari and Chrome */
{
0% {transform: rotate(-20deg);-webkit-transform:rotate(-20deg); /* Safari 和 Chrome */}
10% {transform: rotate(20deg);-webkit-transform:rotate(20deg); /* Safari 和 Chrome */}
20% {transform: rotate(-20deg);-webkit-transform:rotate(-20deg); /* Safari 和 Chrome */}
30% {transform: rotate(20deg);-webkit-transform:rotate(20deg); /* Safari 和 Chrome */}
40% {transform: rotate(-15deg);-webkit-transform:rotate(-15deg); /* Safari 和 Chrome */}
50% {transform: rotate(15deg);-webkit-transform:rotate(15deg); /* Safari 和 Chrome */}
60% {transform: rotate(-10deg);-webkit-transform:rotate(-10deg); /* Safari 和 Chrome */}
70% {transform: rotate(10deg);-webkit-transform:rotate(10deg); /* Safari 和 Chrome */}
80% {transform: rotate(-15deg);-webkit-transform:rotate(-15deg); /* Safari 和 Chrome */}
90% {transform: rotate(15deg);-webkit-transform:rotate(15deg); /* Safari 和 Chrome */}
100% {transform: rotate(0deg);-webkit-transform:rotate(0deg); /* Safari 和 Chrome */}
}
}</style>上一篇：CSS3特效如何让网页变倾斜
下一篇：CSS3动画 网页淡入淡出特效
发表评论:
◎欢迎您的参与讨论。