Maison > Article > interface Web > Exemple d'animation CSS3 de clic pour agrandir

Exemple d'animation CSS3 de clic pour agrandir

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

Cette fois, je vais vous présenter un exemple d'animation utilisant CSS3 pour implémenter une animation cliquer pour zoomer. Quelles sont les précautions pour implémenter un exemple d'animation cliquer pour zoomer à l'aide de CSS3. un cas pratique, jetons un coup d'oeil.

Avant-propos

J'ai récemment rencontré un besoin au travail. L'effet obtenu est que lorsque l'on appuie sur le bouton de collecte en haut à droite du produit. Lorsque l'on clique sur l'image, l'animation de zoom est déclenchée. Plus tard, après avoir recherché des informations pertinentes, j'ai découvert que cet effet pouvait être obtenu en utilisant l'animation css3:@keyframes.

Focus technique css3 : animation @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 = $('.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>

Le rendu est le suivant :

Je pense que vous maîtrisez la méthode après avoir lu le cas présenté dans cet article. Pour des informations plus intéressantes, veuillez payer. attention aux autres articles connexes sur le site PHP chinois !

Lecture recommandée :

CSS propose plusieurs façons d'implémenter une disposition à trois colonnes

CSS implémente un processus de flèche avec article de progrès visible

Utilisation de HTML+CSS pour implémenter le menu déroulant

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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：Explication détaillée de l'utilisation de px, em et rem en CSSArticle suivant：Explication détaillée de l'utilisation de px, em et rem en CSS

Articles Liés

Voir plus