Maison > interface Web > tutoriel CSS > le corps du texte

Comment créer une animation de vol de papillon avec CSS3

php中世界最好的语言
Libérer: 2017-11-24 15:13:20
original
3434 Les gens l'ont consulté

Comment créer une animation de papillon volant avec CSS3 ? À quoi ressemble l’effet d’animation des papillons volants ? À quels aspects faut-il prêter attention lors de la création d’une animation de vol de papillon avec CSS3 ? Aujourd'hui, je vais utiliser CSS3 pour créer une animation de vol de papillon.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
<title>CSS3制作蝴蝶飞舞动画</title>
<meta name="keywords" content=" CSS3制作蝴蝶飞舞动画" />
<meta name="description" content=" CSS3制作蝴蝶飞舞动画" />
      <style>   
      body{
  background-color: lightblue;
}
#container {
perspective: 600px;
perspective-origin: -20% 20%;
width: 850px;
height: 566px;
left: 300px;
top: 0px;
color: gray;
margin: 0px auto;
}
#butterfly {
transform: rotateZ(-30deg) rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
transform-origin: 51% 50%;
left: 0px;
top: 0px;
width: 400px;
height: 238px;
transform-style: preserve-3d;
/*Fly in a loop below*/
/*animation-name: butterflyani;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;*/
}
.wing {
transform: rotateX(30deg)  translate3d(-200px, 0px, 0px) rotate3d(0, 1, 0, 160deg);
transform-origin: top right;
position: absolute;
left: 200px;
top: 0px;
width: 200px;
height: 238px;
background: url(butterfly.png) no-repeat;
animation-name: rightwingani;
animation-duration: 0.6s;
animation-delay: 2s;
animation-iteration-count: 4;
animation-timing-function: ease-out;
}
#butterfly .left{
transform: rotateX(30deg) rotate3d(0, 1, 0, 0deg);
animation-name: leftwingani;
left: 0px;
top: 0px;
}
@keyframes rightwingani {
         from {
                   transform:rotateX(30deg) translate3d(-200px, 0px, 0px) rotate3d(0, 1, 0, 160deg);
         }
         50% {
                   transform:rotateX(30deg) translate3d(-200px, 0px, 0px) rotate3d(0, 1, 0, 100deg);
         }
         to{
                   transform:rotateX(30deg) translate3d(-200px, 0px, 0px) rotate3d(0, 1, 0, 160deg);
         }
}
 
@keyframes leftwingani {
         from {
                   transform:rotateX(30deg) rotate3d(0, 1, 0, 0deg);
         }
         50% {
                   transform:rotateX(30deg) rotate3d(0, 1, 0, 80deg);
         }
         to{
                   transform:rotateX(30deg) rotate3d(0, 1, 0, 00deg);
         }
}
a {
  font-size: 5.5em;
  font-family: Arial;
  text-decoration: none;
  text-align: right;
  color: teal;
  letter-spacing: -2px;
  position: relative;
  top: -70%;
  left: -9%;
  width: 67%;
  display: block;
  line-height: 1.1em;
}
    </style>
</head>
<body>
  <div id="container">
  <div id="butterfly">
    <div class="left wing"></div>
    <div class="right wing"></div>
  </div>
</div>
    <script src="js/index.js"></script>
</body>
</html>
Copier après la connexion

C'est ainsi que l'animation des papillons volants est créée. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture connexe :

Quels sont les nouveaux attributs d'arrière-plan dans CSS3

Comment utiliser les requêtes multimédias CSS3

Comment créer une boîte flexible CSS3

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!