Exemple d'animation CSS3 de clic pour agrandir-tutoriel CSS-php.cn

Exemple d'animation CSS3 de clic pour agrandir

php中世界最好的语言

Libérer： 2018-03-22 09:56:02

original

4774 Les gens l'ont consulté

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>

Copier après la connexion

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!