纯CSS画的小蝴蝶

→

   /**
    * css3 butterfly animation
    * coder: xiaohudie
    * 2013-05-19
    */
.a {position:absolute;top: 10px;left: -80px;width:250px;-webkit-transform:rotate( 15deg);-moz-transform:rotate(15deg);rotation:25deg; } 
.b,.c {position:absolute;border-top-right-radius:30px;border-bottom-right-radius:30px; border-top:50px solid transparent; border-right:70px solid #D30000;border-bottom:50px solid transparent; }
.b { left:35px;-webkit-transform:rotate( -175deg);-moz-transform:rotate( -175deg); }
.c {left:120px; -webkit-transform:rotate(-5deg);-moz-transform:rotate( -5deg); }
.d {position:absolute;  left:-10px;top:-10px;  background:black; width:5px;height:25px; border-radius:15px;-webkit-transform:rotate( 5deg); -moz-transform:rotate( 5deg); }
.l,.r {-webkit-transform-origin:center; -moz-transform-origin:center; -webkit-animation:b 5s infinite ease-in-out;-moz-animation:b 5s infinite ease-in-out; }
.f {position: absolute;left: 90px;top: 120px;background:#e3e3e3;width: 55px;height: 1px;border-radius: 15px;-webkit-transform: rotate( -15deg);-moz-transform: rotate( -15deg);box-shadow: 1px 1px 15px #000;-webkit-animation:c 5s infinite ease-in-out;-moz-animation:c 5s infinite ease-in-out;}
@-webkit-keyframes a {0% {-webkit-transform:rotate3d(0,1,0,0deg); } 30% {-webkit-transform:rotate3d(0,1,0,-50deg); } 50% {-webkit-transform:rotate3d(0,1,0,0deg); } 70% {-webkit-transform:rotate3d(0,1,0,-80deg);} 100% {-webkit-transform:rotate3d(0,1,0,0deg);} }
@-moz-keyframes a { 0% {-moz-transform:rotate3d(0,1,0,0deg); } 30% {-moz-transform:rotate3d(0,1,0,-50deg); } 50% {  -moz-transform:rotate3d(0,1,0,0deg); } 70% {-moz-transform:rotate3d(0,1,0,-80deg); } 100% {-moz-transform:rotate3d(0,1,0,0deg); } }
@-webkit-keyframes b { 0% {-webkit-transform:rotate3d(0,1,0,0deg); } 30% {-webkit-transform:rotate3d(0,1,0,50deg); } 50% {-webkit-transform:rotate3d(0,1,0,0deg); } 70% {-webkit-transform:rotate3d(0,1,0,80deg); } 100% {-webkit-transform:rotate3d(0,1,0,0deg); } }
@-moz-keyframes b { 0% {-moz-transform:rotate3d(0,1,0,0deg); } 30% {-moz-transform:rotate3d(0,1,0,50deg); } 50% {-moz-transform:rotate3d(0,1,0,0deg); } 70% {-moz-transform:rotate3d(0,1,0,80deg); } 100% { -moz-transform:rotate3d(0,1,0,0deg); } } 
@-moz-keyframes c {0% {width:55px; } 30% {width:45px;left: 100px; } 50% {width:55px; left: 90px;} 70% {width:35px;left: 110px;} 100% {width:55px;left: 90px;} }

<div class="a">
	<div class="l">
		<div class="b">
		</div>
	</div>
	<div class="r">
		<div class="c">
			<div class="d">
			</div>
		</div>
	</div>
	<div class="f"></div>
</div>