# flyingButterfly
**Repository Path**: css3project/flyingButterfly
## Basic Information
- **Project Name**: flyingButterfly
- **Description**: 飞舞的蝴蝶
- **Primary Language**: CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-07-25
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 飞舞的蝴蝶flyingButterfly
效果如下
HTML代码:
```
CSS3逼真的蝴蝶飞舞动画 -A5源码
```
CSS代码：
```
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(../images/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;
}
```