Explication détaillée de l'exemple de code d'animation pour cliquer pour zoomer à l'aide de CSS3-tutoriel CSS-php.cn

Explication détaillée de l'exemple de code d'animation pour cliquer pour zoomer à l'aide de CSS3

高洛峰

Libérer： 2017-03-06 11:26:49

original

1558 Les gens l'ont consulté

Avant-propos

J'ai récemment rencontré un besoin au travail. L'effet est de déclencher une animation de zoom avant lorsque vous cliquez sur le bouton de collecte en haut à droite du produit. image, puis recherchez des informations pertinentes. , J'ai découvert que cet effet peut être obtenu en utilisant l'animation css3:@keyframes.

Exemple de code

<!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>

Copier après la connexion

Le rendu est comme suit：

Explication détaillée de lexemple de code danimation pour cliquer pour zoomer à laide de CSS3

Pour des explications plus détaillées sur l'exemple de code d'animation pour cliquer pour agrandir en utilisant CSS3, veuillez payer attention au site PHP chinois pour les articles connexes !