So implementieren Sie eine Bildvergrößerungsanimation mit CSS

Methode: 1. Verwenden Sie die Regel „@keyframes Animation Name {}“ und die Anweisung „transform:scale (scale);“, um eine Vergrößerungs- und Verkleinerungsanimation zu erstellen. 2. Verwenden Sie die „picture element {animation;“ : Animationsname, Zeit unendlich;}“-Anweisung Die Skalierungsanimation wird auf Bildelemente angewendet.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS können Sie Animationsattribute, „@keyframes“-Regeln und transform:scale() verwenden, um eine Animation zum Vergrößern von Bildern zu implementieren.

Beispiel 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; /*动画所花费的时间*/
        }

Die oben genannten Attribute können auch zusammen geschrieben werden

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

Effekt:

Beispiel 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秒*/
        }

Die Essenz besteht darin, das Verzögerungsattribut der Animation zu verwenden Die animationsbezogenen Attribute der beiden Kreisebenen sind grundsätzlich gleich, außer dass der äußerste Kreis über ein zusätzliches Animationsverzögerungsattribut verfügt

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Bildvergrößerungsanimation mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!