Code pour créer un papillon battant des ailes en utilisant CSS3

Cet article présente principalement les informations pertinentes sur l'exemple de création d'un papillon battant des ailes en utilisant du CSS3 pur. J'aimerais le partager avec vous maintenant et le donner comme référence.

Css3 pur pour faire battre des ailes à un papillon, voyons d'abord l'effet

, l'effet est plutôt bon, n'est-ce pas ?

Téléchargez le code :

html

<p id="butterfly">
    <p class="leftSide"></p>
    <p class="body"></p>
    <p class="rightSide"></p>
</p>

css

body{
            background: url("./images/bg.jpg") no-repeat;
        }
        #butterfly{
            width: 600px;
            height: 500px;
            position: relative;
            transform: scale(0.35);
            transform-style: preserve-3d;
        }
        .leftSide{
            width: 267px;
            height: 421px;
            background: url("./images/leftSide.png") no-repeat;
            position: absolute;
            left: 26px;
            top: 40px;
            animation: left 2s infinite;
            z-index: 9999;
        }
        @keyframes left {
            0%{
                transform: rotateY(0deg);
                transform-origin: right center;
                perspective: 201px;

            }
            50%{
                transform: rotateY(70deg);
                transform-origin: right center;
                perspective: 201px;

            }
            100%{
                transform: rotateY(0deg);
                transform-origin: right center;
                perspective: 201px;
            }
        }
        @keyframes right {
            0%{
                transform: rotateY(0);
                transform-origin: left center;
                perspective: 201px;

            }
            50%{
                transform: rotateY(-70deg);
                transform-origin: left center;
                perspective: 201px;

            }
            100%{
                transform: rotateY(0);
                transform-origin: left center;
                perspective: 201px;

            }
        }
        .body{
            width: 152px;
            height: 328px;
            background: url("./images/body.png") no-repeat;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            z-index: 9999;
        }
        .rightSide{
            width: 284px;
            height: 460px;
            background: url("./images/rightSide.png") no-repeat;
            position: absolute;
            right: 26px;
            top: 58px;
            animation: right 2s infinite;
            z-index: 9999;
        }

ici Plusieurs propriétés CSS ont été introduites auparavant ;

@keyframes

1. Grâce aux règles @keyframes, nous pouvons créer animations

2. Le principe de la création d'une animation est de changer progressivement un ensemble de styles CSS en un autre ensemble de styles

3. Spécifiez l'heure à laquelle le changement se présente sous forme de pourcentage, ou via les mots-clés « de » et « à », équivalents à 0 % et 100 %.

4. 0% est l'heure de début de l'animation, 100% est l'heure de fin de l'animation

transform: rotateY( )

1. transform applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.

2. rotateY() définit une rotation 3D le long de l'axe Y.

Cette image illustre l'axe xyz de manière très intuitive. En fait, les étudiants qui ont étudié un logiciel de modélisation 3D tel que 3DS MAX devraient être plus familiers avec cela. Orientation 3 axes.

Idée de mise en œuvre : utilisez d'abord la phase fils et père pour positionner de manière absolue l'aile gauche, l'aile droite et le corps et les assembler, puis utilisez la rotationY de transformation pour les faire pivoter le long de l'axe y. L'animation @keyframe est utilisée ici pour la rotation, puis répétez l'action.

Je voudrais également me concentrer sur l'attribut transform-style:preserve-3d;La description de w3c est de permettre aux sous-éléments convertis de conserver leur transformation 3D. C'est-à-dire que tous les sous-éléments sont présentés dans l'espace 3D. Au contraire, s'il est réglé sur plat, tous les sous-éléments seront présentés dans l'espace 2D

Ce qui précède est tout le contenu de celui-ci. article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Plus Veuillez faire attention au site Web PHP chinois pour le contenu associé !

Recommandations associées :

Utilisez CSS3 pour obtenir un effet de style ballon

Utilisez CSS3 pour implémenter des bulles de discussion WeChat

Comment utiliser HTML et CSS3 pour simuler le rythme cardiaque

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!