css如何實現圖片放大縮小動畫

這篇“css如何實現圖片放大縮小動畫”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“css如何實現圖片放大縮小動畫”，給大家總結了以下內容，具有一定借鑒價值，內容詳細步驟清晰，細節處理妥當，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內容吧。

方法：1、使用“@keyframes 動畫名稱{}”規則和“transform:scale(縮放比例);”語句創建放大縮小動畫；2、使用“圖片元素{animation:動畫名稱 時間 infinite;}”語句縮放動畫應用于圖片元素中。

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css中，可以使用animation屬性、“@keyframes”規則、transform: scale()實現圖片放大縮小動畫。

示例1：

<div class="ballon"></div>

/*css部分*/
   @keyframes scaleDraw {  /*定義關鍵幀、scaleDrew是需要綁定到選擇器的關鍵幀名稱*/
            0%{
                transform: scale(1);  /*開始為原始大小*/
            }
            25%{
                transform: scale(1.1); /*放大1.1倍*/
            }
            50%{
                transform: scale(1);
            }
            75%{
                transform: scale(1.1);
            }
        }
    .ballon{
            width: 150px;
            height: 200px;
            background: url("images/balloon.png");
            background-size: 150px 200px;
            -webkit-animation-name: scaleDraw; /*關鍵幀名稱*/
            -webkit-animation-timing-function: ease-in-out; /*動畫的速度曲線*/
            -webkit-animation-iteration-count: infinite;  /*動畫播放的次數*/
            -webkit-animation-duration: 5s; /*動畫所花費的時間*/
        }

上面的幾個屬性也可以合在一起寫

animation: scaleDraw 5s ease-in-out infinite;
-webkit-animation: scaleDraw 5s ease-in-out infinite;

效果：

實例2：

 <div class="live">
         <img src="images/live.png" alt="">
         <span></span>
         <span></span>
 </div>

.live{
           position: relative;
           width: 100px;
           height: 100px;
       }
       .live img{
           width: 100px;
           height: 100px;
           z-index: 0;
       }
        @keyframes living {
            0%{
                transform: scale(1);
                opacity: 0.5;  
            }
            50%{
                transform: scale(1.5);  
                opacity: 0;   /*圓形放大的同時，透明度逐漸減小為0*/
            }
            100%{
                transform: scale(1);
                opacity: 0.5;
            }
        }
        .live span{
            position: absolute;
            width: 100px;
            height: 100px;
            left: 0;
            bottom: 0;
            background: #fff;
            border-radius: 50%;
            -webkit-animation: living 3s linear infinite;
            z-index: -1;
        }
        .live span:nth-child(2){
            -webkit-animation-delay: 1.5s; /*第二個span動畫延遲1.5秒*/
        }

實質就是就是利用了動畫的延遲屬性，兩層圓的動畫相關的屬性基本相同，除了最外層的圓多設置了animation-delay屬性

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

感謝您的閱讀，希望您對“css如何實現圖片放大縮小動畫”這一關鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領會，快去試試吧，如果想閱讀更多相關知識點的文章，歡迎關注億速云行業資訊頻道！