CSS3制作蝴蝶飞舞动画

2019-09-13 郑州网站建设  

<!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=http://www.divcss5.com/css3-style/"js/index.js"></script>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2157.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • Doctype
  • CSS3
  • !
  • hea