欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css3动画 抖动效果_html/css_WEB-ITnose

程序员文章站 2022-05-22 08:14:26
...
html结构:



css样式:

.dd {

animation: shake 1s;
-o-animation: shake 1s;
-webkit-animation: shake 1s;
-moz-animation: shake 1s;
}
@keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-5px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(5px);
}
}
@-o-keyframes shake {
/* Opera */
0%, 100% {
-webkit-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-5px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(5px);
}
}
@-webkit-keyframes shake {
/* Safari 和 Chrome */
0%, 100% {
-webkit-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-5px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(5px);
}
}
@-moz-keyframes shake {
/* Firefox */
0%, 100% {
-moz-transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-moz-transform: translateX(-5px);
}
20%,
40%,
60%,
80% {
-moz-transform: translateX(5px);
}

}


js效果:



效果:


鼠标经过home图标时,图标会左右晃动。