纯CSS画的小蝴蝶

   /**
* css3 butterfly animation
* coder:
* 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>
45 Comments

Name *

E-mail *

Website

  1. SEO博客

    这个比较像假领。。。O(∩_∩)O~

  2. 阿健

    博客很棒,github借鉴的相当到位,妹子也好直爽哦~
    蝴蝶第一眼像,再越看越不像。。为咩?
    主题在ie8下头部有点惨不忍睹~

    • 小蝴蝶

      @阿健 为咩?我也唔知了..
      ff我都懒得兼容..

  3. 郑力个人主页

    不错的效果。

  4. 谢单单

    这个蛮好..

  5. 阿福

    - -看起来像领带。。

  6. 零落千起

    说实话,这一坨…我蛋疼

  7. 电脑爱好者

    蝴蝶结!