css3动画 抖动效果_html/css_WEB-ITnose
程序员文章站
2022-05-22 08:14:26
...
html结构:
-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);
}
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图标时,图标会左右晃动。
上一篇: GraPHPite--PHP图像库新秀
下一篇: PHP领域的术语对照(英中繁简)(转)。
推荐阅读
-
【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计_html/css_WEB-ITnose
-
如何利用CSS实现图片的透明效果_html/css_WEB-ITnose
-
使用 CSS3 伪元素实现立体的照片堆叠效_html/css_WEB-ITnose
-
CSS3 动画系列_html/css_WEB-ITnose
-
使用css3实现文章新闻列表排行榜(数字)_html/css_WEB-ITnose
-
9种CSS3 blend模式制作的鼠标滑过图片标题特效_html/css_WEB-ITnose
-
CSS3实现的鼠标悬浮开门关门效果代码实例_html/css_WEB-ITnose
-
CSS3和SVG炫酷鼠标点击按钮效果_html/css_WEB-ITnose
-
html效果实现不了_html/css_WEB-ITnose
-
[转]CSS3 Media Query实现响应布局_html/css_WEB-ITnose