CSS3-Animationsbeispiel für das Klicken zum Vergrößern-CSS-Tutorial-php.cn

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

php中世界最好的语言

Freigeben： 2018-03-22 09:56:02

Original

4750 Leute haben es durchsucht

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

<!DOCTYPE html>
<head>
       <style type="text/css">
        @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>
</head>
<body>
<p class="warp">
    <p class="btn"></p>
</p>
<script src="http://liuxiaofan.com/demo/js/jquery-2.1.4.min.js"></script>
<script>
   var btn = $('.btn');
    btn.click(function () {
        if( $(this).is('.yes')){
            $(this).removeClass('yes');
            $(this).removeClass('cur');
        }else{
            $(this).addClass('yes');
            $(this).addClass('cur');
        }
    });
    btn.on('webkitAnimationEnd', function () {
        $(this).removeClass('cur');
    });
</script>
</body>
</html>

Nach dem Login kopieren

Das Rendering ist wie folgt:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Informationen zahlen Sie bitte Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

CSS bietet mehrere Möglichkeiten, ein dreispaltiges Layout zu implementieren.

CSS implementiert einen Pfeilprozess mit Artikel zum sichtbaren Fortschritt

Verwendung von HTML+CSS zur Implementierung des Dropdown-Menüs

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!