CSS3で蝶が飛ぶアニメーションを作成する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3で蝶が飛ぶアニメーションを作成する方法

php中世界最好的语言

Nov 24, 2017 pm 03:13 PM

csscss3

CSS3 で蝶が飛ぶアニメーションを作成するには?蝶が飛んでいるアニメーション効果はどのようなものですか? CSS3で蝶が飛ぶアニメーションを作成する場合、どのような点に注意すべきでしょうか?今回はCSS3を使って蝶が飛ぶアニメーションを作成してみます。

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

蝶が飛ぶアニメーションはこのようにして作成されています。さらにエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事にご注目ください。

CSS3 にはどのような新しい背景属性がありますか?

CSS3 メディアクエリの使用方法

CSS3 でフレキシブルボックスを作成する方法

以上がCSS3で蝶が飛ぶアニメーションを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。