Heim > Artikel > Web-Frontend > Ausführliche Erläuterung des Animationsbeispielcodes für Click-to-Zoom mit CSS3

Ausführliche Erläuterung des Animationsbeispielcodes für Click-to-Zoom mit CSS3

高洛峰Original: 2017-03-06 11:26:491482Durchsuche

Vorwort

Ich bin kürzlich bei der Arbeit auf ein Bedürfnis gestoßen. Der Effekt besteht darin, eine Zoom-Animation auszulösen, wenn ich auf die Sammlungsschaltfläche oben rechts im Produkt klicke Bild und suchen Sie dann nach relevanten Informationen. Ich habe festgestellt, dass dieser Effekt durch die Verwendung von css3:@keyframes-Animationen erzielt werden kann.

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 = $(&#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>
</body>
</html>

Das Rendering ist wie folgt:

Ausführliche Erläuterung des Animationsbeispielcodes für Click-to-Zoom mit CSS3

Für detailliertere Erklärungen des Animationsbeispielcodes für Click-to-enlarge mit CSS3 zahlen Sie bitte Beachten Sie die chinesische PHP-Website für verwandte Artikel!

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：Eine Einführung in den Unterschied zwischen Inline-Elementen und Elementen auf Blockebene in CSSNächster Artikel：Eine Einführung in den Unterschied zwischen Inline-Elementen und Elementen auf Blockebene in CSS

In Verbindung stehende Artikel

Mehr sehen