Heim > Artikel > Web-Frontend > CSS3-Animationsbeispiel für das Klicken zum Vergrößern

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

php中世界最好的语言Original: 2018-03-22 09:56:024775Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erklärung der Verwendung von px, em und rem in CSSNächster Artikel：Detaillierte Erklärung der Verwendung von px, em und rem in CSS

In Verbindung stehende Artikel

Mehr sehen