CSS3怎么制作蝴蝶飞舞的动画

来源：懂视网责编：小采时间：2020-11-27 18:49:47

CSS3怎么制作蝴蝶飞舞的动画

CSS3怎么制作蝴蝶飞舞的动画:CSS3怎么制作蝴蝶飞舞的动画？蝴蝶飞舞的动画效果是什么样的？CSS3制作蝴蝶飞舞的动画需要注意哪些方面？今天给大家用CSS3做一个蝴蝶飞舞的动画。<!DOCTYPE html> <html > <head> <meta charset="UTF

推荐度：

点击下载本文 文档为doc格式

导读CSS3怎么制作蝴蝶飞舞的动画:CSS3怎么制作蝴蝶飞舞的动画？蝴蝶飞舞的动画效果是什么样的？CSS3制作蝴蝶飞舞的动画需要注意哪些方面？今天给大家用CSS3做一个蝴蝶飞舞的动画。<!DOCTYPE html> <html > <head> <meta charset="UTF

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>

蝴蝶飞舞的动画就是这么做出来的，更多精彩请关注Gxl网其它相关文章！

CSS3怎么制作蝴蝶飞舞的动画

推荐度：

点击下载本文 文档为doc格式

标签：蝴蝶动画蝴蝶的

热门焦点

CSS3怎么制作蝴蝶飞舞的动画

CSS3怎么制作蝴蝶飞舞的动画

CSS3怎么制作蝴蝶飞舞的动画

最新推荐

猜你喜欢

热门推荐