So erstellen Sie eine Schmetterlingsfluganimation mit CSS3-CSS-Tutorial-php.cn

So erstellen Sie eine Schmetterlingsfluganimation mit CSS3

php中世界最好的语言

Freigeben： 2017-11-24 15:13:20

Original

3513 Leute haben es durchsucht

Wie erstelle ich mit CSS3 eine Schmetterlingsfluganimation? Wie sieht der Animationseffekt fliegender Schmetterlinge aus? Auf welche Aspekte sollte bei der Erstellung von Schmetterlingsfluganimationen mit CSS3 geachtet werden? Heute werde ich CSS3 verwenden, um eine Schmetterlingsfluganimation zu erstellen.

<!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>

Nach dem Login kopieren

So entsteht die Animation fliegender Schmetterlinge. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Welche neuen Hintergrundattribute gibt es in CSS3

So verwenden Sie CSS3-Medienabfragen

So erstellen Sie eine flexible Box in CSS3

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Schmetterlingsfluganimation mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!