css3實現循環抖動等動畫

本文轉載自查看原文 2020-05-16 20:44 1829 css/ html

<!doctype html>
<html charset="utf-8">
<head>
<link rel="dns-prefetch" href="http://i.tq121.com.cn">
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>重點在實現抖動</title>
<meta http-equiv="Content-Language" content="zh-cn">

<meta name="keywords" content="關鍵詞,關鍵詞,..." />
<meta name="description" content="關鍵詞,關鍵詞,..." />
<style type="text/css">
/* 實現圖片旋轉，當鼠標移動上去就停止 */

/* 實現的是過渡 */
img:hover{
width:1000px;
/* 開始之前等待兩秒，實現過渡 */
transition: width 10s linear 0s; 
/* Firefox 4 */
-moz-transition:width 10s linear 0s;
/* Safari and Chrome */
-webkit-transition:width 10s linear 0s;
/* Opera */
-o-transition:width 10s linear 0s;

/* 實現角度變化*/
transform: rotate(5deg);
-webkit-transform: rotate(5deg);    /* Safari 和 Chrome */
-moz-transform: rotate(5deg);
}

/* 實現抖動 */
@keyframes myfirst
{
 0% {
        transform: scale(1);
        transform: scale(1)
    }

    70%,73%{
        transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    77%,83%,90%,97%  {
        transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    80%,87%,93%{
        transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

@-moz-keyframes myfirst /* Firefox */
{
 0% {
        transform: scale(1);
        transform: scale(1)
    }

    70%,73%{
        transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    77%,83%,90%,97%  {
        transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    80%,87%,93%{
        transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
 0% {
        transform: scale(1);
        transform: scale(1)
    }

    70%,73%{
        transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    77%,83%,90%,97%  {
        transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    80%,87%,93%{
        transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

@-o-keyframes myfirst /* Opera */
{
 0% {
        transform: scale(1);
        transform: scale(1)
    }

    70%,73%{
        transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    77%,83%,90%,97%  {
        transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    80%,87%,93%{
        transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}
/* 實現捆綁 myfirst*/
img
{
-webkit-animation: myfirst 3s both infinite;
-moz-animation: myfirst 3s both infinite;
-ms-animation: myfirst 3s both infinite;
animation: myfirst 3s both infinite;
}
</style>
</head>
<body>
<img width="50" height="300" src="C:\Users\macbook\Desktop\1.jpg"/>




</body>
</html>

View Code

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS3動畫之按鈕抖動 CSS3 循環動畫 CSS3常用的循環動畫 css3實現循環執行動畫，且動畫每次都有延遲 JavaScript - 基於CSS3動畫的實現 css3實現開門動畫 vue實現動畫和css3動畫屬性如何用css3實現一個圖片的抖動或者彈跳效果使用css3動畫制作，但是動畫會導致頁面抖動閃屏 css3 圖片抖動效果