HTML里css画蝴蝶,纯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;} }

css_butterfly is coded by http://xiaohudie.net. Any posts here is one hundred percent original, so please keep my link so as not to hurt this pretty girl. -小蝴蝶