首頁 > web前端 > html教學 > css3动画 抖动效果_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-06-24 11:49:04
原創
1998 人瀏覽過

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图标时,图标会左右晃动。

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
css3 - CSS過渡效果導致文字模糊或抖動?
來自於 1970-01-01 08:00:00
0
0
0
java - springboot新手學習
來自於 1970-01-01 08:00:00
0
0
0
spring - JavaWeb中 Service 層的事務問題
來自於 1970-01-01 08:00:00
0
0
0
java - C語言演算法題-韓信點兵 解法?
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板