用css3實現圖片的放大縮小


記錄一個公用的css實現圖片的放大縮小

@keyframes scaleDraw {  /*定義關鍵幀、scaleDrew是需要綁定到選擇器的關鍵幀名稱*/
    0%{
        transform: scale(1);  /*開始為原始大小*/
    }
    25%{
        transform: scale(1.5); /*放大1.1倍*/
    }
    50%{
        transform: scale(1);
    }
    75%{
        transform: scale(1.5);
    }
}

.showImg {
  width: 20px;
  height: 20px;
  animation: scaleDraw 5s ease-in-out infinite;
}
<img src=""  class="showImg " alt="">


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM