Maison > Article > interface Web > Comment créer une animation de vol de papillon avec CSS3
Comment créer une animation de vol de papillon avec CSS3
- php中世界最好的语言original
- 2017-11-24 15:13:203457parcourir
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>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!