Rumah > hujung hadapan web > html tutorial > css3动画 抖动效果_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 11:49:04
asal
1963 orang telah melayarinya

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan