Maison > Article > interface Web > Explication détaillée de l'exemple de code d'animation pour cliquer pour zoomer à l'aide de CSS3

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

高洛峰original: 2017-03-06 11:26:491535parcourir

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>

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 !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Une introduction à la différence entre les éléments en ligne et les éléments de niveau bloc en CSSArticle suivant：Une introduction à la différence entre les éléments en ligne et les éléments de niveau bloc en CSS

Articles Liés

Voir plus