CSS3-Animationsbeispiel für das Klicken zum Vergrößern

Dieses Mal zeige ich Ihnen ein Animationsbeispiel für die Implementierung von Click-to-Zoom-Animationen. Was sind die Vorsichtsmaßnahmen für die Implementierung eines Click-to-Zoom-Animationen mit CSS3? Ein praktischer Fall, werfen wir einen Blick darauf.

Vorwort

Ich bin kürzlich auf einen Bedarf bei der Arbeit gestoßen. Der erzielte Effekt ist, dass wenn die Sammlung auf der oberen rechten Seite des Produkts gedrückt wird Wenn ich auf das Bild klicke, wird die Zoom-Animation ausgelöst. Nachdem ich nach relevanten Informationen gesucht habe, habe ich herausgefunden, dass dieser Effekt durch die Verwendung der css3:@keyframes-Animation erzielt werden kann.

Technischer Fokus CSS3: @keyframes Animation

Beispielcode

nbsp;html>

       <style>
        @keyframes myfirst {
            0% {
                width: 50px;
                height: 50px;
                top: 10px;
                right: 10px;
            }
            75% {
                width: 60px;
                height: 60px;
                top: 5px;
                right: 5px;
            }
            100% {
                width: 50px;
                height: 50px;
                top: 10px;
                right: 10px;
            }
        }
        .warp {
            width: 400px;
            height: 300px;
            position: relative;
            background: #ccc;
        }
        .btn {
            position: absolute;
            width: 50px;
            height: 50px;
            border:solid 3px #cc3c24;
            top: 10px;
            right: 10px;
            border-radius: 8px;
            cursor: pointer;
        }
        .btn.cur{
            animation: myfirst 0.2s;
        }
        .btn.yes{
            background: #cc3c24;
        }
    </style>


<p>
    </p><p></p>

<script></script>
<script>
   var btn = $(&#39;.btn&#39;);
    btn.click(function () {
        if( $(this).is(&#39;.yes&#39;)){
            $(this).removeClass(&#39;yes&#39;);
            $(this).removeClass(&#39;cur&#39;);
        }else{
            $(this).addClass(&#39;yes&#39;);
            $(this).addClass(&#39;cur&#39;);
        }
    });
    btn.on(&#39;webkitAnimationEnd&#39;, function () {
        $(this).removeClass(&#39;cur&#39;);
    });
</script>

Das obige ist der detaillierte Inhalt vonCSS3-Animationsbeispiel für das Klicken zum Vergrößern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!