Ausführliche Erläuterung des Animationsbeispielcodes für Click-to-Zoom mit CSS3-CSS-Tutorial-php.cn

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

高洛峰

Freigeben： 2017-03-06 11:26:49

Original

1517 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!