css如何實(shí)現(xiàn)圖片放大縮小動畫

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

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

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

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

示例1：

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

/*css部分*/
   @keyframes scaleDraw {  /*定義關(guān)鍵幀、scaleDrew是需要綁定到選擇器的關(guān)鍵幀名稱*/
            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; /*關(guān)鍵幀名稱*/
            -webkit-animation-timing-function: ease-in-out; /*動畫的速度曲線*/
            -webkit-animation-iteration-count: infinite;  /*動畫播放的次數(shù)*/
            -webkit-animation-duration: 5s; /*動畫所花費(fèi)的時(shí)間*/
        }

上面的幾個(gè)屬性也可以合在一起寫

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

效果：

實(shí)例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;   /*圓形放大的同時(shí)，透明度逐漸減小為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; /*第二個(gè)span動畫延遲1.5秒*/
        }

實(shí)質(zhì)就是就是利用了動畫的延遲屬性，兩層圓的動畫相關(guān)的屬性基本相同，除了最外層的圓多設(shè)置了animation-delay屬性

css的選擇器有哪些

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

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