css3动画 如何让网页左右抖动

SongKer 发布时间:2015-08-13 分类:Web 阅读:4653次 添加评论

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动画网页抖动

暂无留言

发表评论:

◎欢迎您的参与讨论。