纯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>

LIKE OR SHARE IT:

admin发表于Code目录下,标签为,转载请保留链接

TOP DOWN
发表评论

您必须 [ 登录 ] 才能发表留言!

  1. 沙 发 xsinger

    沙发

    五月 19, 2013 16:57:10
  2. 板 凳 airoschou

    发沙!

    五月 19, 2013 17:31:15
  3. 地 板 万年木头

    前来膜拜

    五月 19, 2013 17:52:29
  4. 地 毯 不亦乐乎

    这个这个。。。
    蝴蝶的身子可以再美化一下,这样太随便了。

    五月 19, 2013 19:39:49
  5. 地 面 不亦乐乎

    话说这蝴蝶有待改进啊,不像是在扇动翅膀,更像是粘在蜘蛛网上随风飘荡呢。

    五月 19, 2013 19:41:46
  6. 地 下 yxiao

    这个屌

    五月 19, 2013 21:12:03
  7. 7 楼 胡倡萌

    让它到处飞飞就更不错了

    五月 19, 2013 21:21:41
  8. 8 楼 郑永

    好了,终于看到你的原形了!!

    五月 19, 2013 21:28:18
  9. 9 楼 郑永

    纯技术型折腾。

    五月 19, 2013 21:28:38
  10. 10 楼 予沐

    好有韵味的蝴蝶~
    嗯…这是什么来着? :)

    五月 19, 2013 22:03:13
  11. 11 楼 ChoJemmy

    你一个不是学计算机的,从哪学到这么多玩意儿!从实招来

    五月 19, 2013 22:13:57
  12. 12 楼 阿邙

    蝴蝶结哇哈。 和我结婚时戴的有点像。

    五月 19, 2013 22:15:04
  13. 13 楼 figo

    不错哦~

    五月 19, 2013 22:19:57
  14. 14 楼 死神的微笑

    慢慢飞,小心前面带刺的玫瑰。。

    五月 20, 2013 13:07:42
  15. 15 楼 夜枫

    我有密度恐惧症,撑死都没有看懂是怎么个回事~~

    五月 20, 2013 14:46:08
  16. 16 楼 夜枫

    今天是个好日子,可惜被我写成了250了….

    五月 20, 2013 15:32:31
  17. 17 楼 公子

    我的logo用这个能写出来不。。。

    五月 20, 2013 15:57:14
  18. 18 楼 Tokin

    不会用CSS3画画…唉…

    五月 20, 2013 16:05:02
  19. 19 楼 张书杨

    喜欢:左飞飞、右飞飞,呵呵

    五月 20, 2013 19:11:23
  20. 20 楼 tiandi

    神人无处不在啊。

    五月 21, 2013 08:31:23
  21. 21 楼 SEO博客

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

    五月 23, 2013 09:05:48
  22. 22 楼 阿健

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

    五月 23, 2013 13:54:07
  23. 23 楼 郑力个人主页

    不错的效果。

    六月 5, 2013 18:00:03
  24. 24 楼 谢单单

    这个蛮好..

    六月 6, 2013 08:46:42
  25. 25 楼 阿福

    - -看起来像领带。。

    八月 4, 2013 20:30:50
  26. 26 楼 零落千起

    说实话,这一坨…我蛋疼

    十二月 28, 2013 23:45:23
  27. 27 楼 电脑爱好者

    蝴蝶结!

    四月 26, 2014 16:09:03