Exemples de fabrication de papillons css3 purs qui incitent wings_css3_CSS_Webpage making

2020-05-10

Pure css3 fait des papillons qui incitent aux ailes, regardez d'abord l'effet

Que diriez-vous, l'effet n'est pas mauvais

Le code ci-dessus:

html


 
    
    
    

css


 corps {
             fond: url ("./ images / bg.jpg") sans répétition;
         }
         #butterfly {
             largeur: 600px;
             hauteur: 500px;
             position: relative;
             transformer: échelle (0,35);
             transformer-style: préserver-3d;
         }
         .leftSide {
             largeur: 267px;
             hauteur: 421px;
             fond: url ("./ images / leftSide.png") sans répétition;
             position: absolue;
             gauche: 26 px;
             haut: 40px;
             animation: gauche 2s infini;
             indice z: 9999;
         }
         @keyframes left {
             0% {
                 transform: rotationY (0deg);
                 transformation-origine: centre droit;
                 perspective: 201px;

             }
             50% {
                 transformer: tournerY (70deg);
                 transformation-origine: centre droit;
                 perspective: 201px;

             }
             100% {
                 transform: rotationY (0deg);
                 transformation-origine: centre droit;
                 perspective: 201px;
             }
         }
         @keyframes à droite {
             0% {
                 transformer: rotationY (0);
                 transformation-origine: centre gauche;
                 perspective: 201px;

             }
             50% {
                 transform: rotationY (-70deg);
                 transformation-origine: centre gauche;
                 perspective: 201px;

             }
             100% {
                 transformer: rotationY (0);
                 transformation-origine: centre gauche;
                 perspective: 201px;

             }
         }
         .body {
             largeur: 152px;
             hauteur: 328px;
             fond: url ("./ images / body.png") sans répétition;
             position: absolue;
             marge: auto;
             gauche: 0;
             à droite: 0;
             en bas: 0;
             en haut: 0;
             indice z: 9999;
         }
         .rightSide {
             largeur: 284px;
             hauteur: 460px;
             fond: url ("./ images / rightSide.png") sans répétition;
             position: absolue;
             à droite: 26 pixels;
             haut: 58 px;
             animation: droite 2s infinie;
             indice z: 9999;
         }

 
 

Introduisez plusieurs attributs css avant cela;

@keyframes

        
  1. Grâce aux règles @keyframes, nous pouvons créer des animations
  2.     
  3. Le principe de la création d'animation est de changer progressivement un ensemble de styles CSS en un autre ensemble de styles
  4.     
  5. Spécifiez l'heure à laquelle le changement a lieu en pourcentage, ou les mots clés "de" et "à" sont équivalents à 0% et 100%.
  6.     
  7. 0% est l'heure de début de l'animation et 100% l'heure de fin de l'animation
  8. transform: rotationY ()

          
    1. L'attribut transform applique une transformation 2D ou 3D à l'élément. Cette propriété nous permet de faire pivoter, mettre à l'échelle, déplacer ou incliner l'élément.
    2.     
    3. rotationY () définit la rotation 3D le long de l'axe Y.
    4. p style = "text-align: center">

      Cette image illustre intuitivement l'axe xyz. En fait, les étudiants qui ont appris un logiciel de modélisation 3D tel que 3DS MAX devraient être plus familiers avec la direction de cet axe 3.

      Idée d'implémentation: utilisez d'abord le fils face à face pour positionner ensemble l'aile gauche, l'aile droite et le corps, puis utilisez transformY pour le faire pivoter le long de l'axe y. Utilisez l'animation @keyframe pour faire pivoter, puis répétez Action.

      Nous devons également nous concentrer sur le style de transformation: préserver-3d; cet attribut, la description de w3c est de faire en sorte que les éléments enfants convertis conservent leur transformation 3D. Autrement dit, tous les éléments enfants sont présentés dans l'espace 3D, si mis à plat au contraire, tous les éléments enfants sont présentés dans l'espace 2D

      Adresse de téléchargement de la démonstration

      Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun, et j'espère que tout le monde le soutiendra.

      Le


www.xd1998.com@2001-2030Partage De Technologie