纯css画的血淋淋的卫生巾

这个是送给大发的,作为对他那个见见的报答.
本来我还愁着卫生巾这玩意儿怎么玩都玩不出他那样的节操,不过我觉得我也已经把卫生巾玩到下限了.

听从了阿修割的建议,颜色改了一下,哈哈哈

哈哈哈哈
我感觉你们应该不需要这玩意儿的,不过代码我还是放出来吧,怎么说这也是篇技术文啊,哈哈哈哈

css

写的略乱,因为我在不断完善,我也感觉我挺不容易的

.jj{width:100px;height:100px;background:#fff;border-top-right-radius:100px;border-top-left-radius:100px;border:1px solid  #000;border-bottom:none}
.jj2{width:100px;height:100px;background:#fff;border:1px solid  #000;border-top:none;border-bottom:none}
.jj3{width:100px;height:100px;background:#fff;border:1px solid  #000;border-bottom-right-radius:100px; border-bottom-left-radius:100px;border-top:none; }
.jj4{width:50px;height:80px;background:#fff;position:absolute; left:-50px;border:1px solid #000;border-bottom-left-radius:100px;border-top-left-radius:100px;border-right:none;}
.jj5{ width:50px;height:80px;background:#fff; border-bottom-right-radius:100px;border-top-right-radius:100px;border:1px solid #000;border-left:none;position:absolute;  left:100px;    }
.jian{ position:absolute; left:500px;top:200px;display:none  } 
#jianjian:hover .jian{display:block}
.jj6{ border-radius:200px / 250px;position:absolute;top:100px;left:30px;-webkit-animation:jianjian 2s ease-in;  -webkit-animation-fill-mode:forwards; -moz-animation:jianjian 2s ease-in;  -moz-animation-fill-mode:forwards;width: 60px;height: 120px;background: #9C0505;box-shadow: 0 0 60px #C20101,inset 0 0 10px #FF9B9B;  }  
@-webkit-keyframes jianjian{  
	0%   {width:0px;height:0px;left:50%;top:50%; opacity:0;}  
	100% {width: 50px;height:80px; opacity:1;}  
}  
@-moz-keyframes jianjian{  
	0%   {width:0px;height:0px;left:50%;top:50%; opacity:0;}  
	100% {width: 50px;height:80px; opacity:1;} 
} 
.jj7{-webkit-animation: bleeding 1s linear 3s infinite;-moz-animation:  bleeding 1s linear 3s infinite;width:10px;height:10px;border-radius:200px ;position:absolute;top:120px;left:40px}
@-webkit-keyframes bleeding {
0% { -webkit-transform: translate3d(0,0,0) rotate(0deg);background:#9C0505;}
100% {-webkit-transform: translate3d(0,1000px,0) rotate(360deg);}	
}
@-moz-keyframes bleeding {
0% { -moz-transform: translate3d(0,0,0) rotate(0deg);background:#9C0505;}
100% {-moz-transform: translate3d(0,1000px,0) rotate(360deg);}	
}
.jj8{-webkit-animation: bleeding2 5s ease-in 3s infinite;-moz-animation:bleeding2 5s ease-in 3s infinite;width:5px;height:10px;border-radius:200px ;position:absolute;top:170px;left:60px;}
@-webkit-keyframes bleeding2 {
0% {  height:0;background:#9C0505}
100% {height:120px}	
}
@-moz-keyframes bleeding2 {
0% {  height:0;background:#9C0505}
100% {height:120px}	
}

html

<div class="jian">
<div class="jj"> </div>
<div class="jj4"> </div>
<div class="jj5"> </div>
<div class="jj2"> </div>
<div class="jj3"> </div>
<div class="jj6"> </div>
<div class="jj7"> </div>
<div class="jj8"> </div>
</div>

LIKE OR SHARE IT:

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

TOP DOWN
发表评论

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

  1. 沙 发 Android

    沙发 :v5:

    四月 13, 2013 14:26:44
    • 哥特复兴

      @Android :fue: :guai: 蝴蝶姐姐求安慰

      101室 四月 13, 2013 14:27:34
      • Android

        @哥特复兴 求陪吐(^_^)

        102室 四月 13, 2013 14:28:09
      • 小蝴蝶

        @哥特复兴 :guai:[email protected]

        102室 四月 13, 2013 14:29:09
      • SEO博客

        @哥特复兴 哎呦,最近沙发换人了啊。

        102室 四月 15, 2013 09:38:45
  2. 板 凳 哥特复兴

    沙发 :v5: 沙发

    四月 13, 2013 14:26:47
  3. 地 板 Android

    吐槽 恶心,,,(⊙o⊙)…

    四月 13, 2013 14:27:07
  4. 地 毯 Android

    jj。。。。。。我勒个去。。。。。。。我吐去了。。

    四月 13, 2013 14:27:42
  5. 地 面 不亦乐乎

    这是小蝴蝶刚用过的,这么新鲜 -_-|||

    四月 13, 2013 14:29:27
  6. 地 下 哥特复兴

    今天早上起来短裤湿了 :guai:

    四月 13, 2013 14:30:02
  7. 7 楼 ChoJemmy

    三分钟前的文。就这样了?受不了这速度了

    四月 13, 2013 14:30:26
  8. 8 楼 Android

    看的大发二字。。我。。。我。。。。我。。。。我。。。真的。。。那个大发他(她)。。。怎么了。。。。。。。。。。。。。。。。。。。。我。。。。。我。。。。。我。。。。。。。。我。。。。。。。我。我。我。我。我。我。。我。。。。。。。。。。.我。。。。。

    四月 13, 2013 14:30:31
  9. 9 楼 Android

    血染红了我平板可爱的10英寸屏。。。小蝴蝶 随便赔个7,8万吧。。

    四月 13, 2013 14:37:31
  10. 10 楼 ChoJemmy

    刚去你qq空间了。原来你还染过金黄色的头发。

    四月 13, 2013 14:40:46
  11. 11 楼 阿邙

    颜色偏鲜艳了点。

    四月 13, 2013 15:03:25
  12. 12 楼 axiu

    颜色应该深一些,看过那么多血浆片的我表示血不是这颜色~~姨妈应该也差不多吧…… :koubi:

    四月 13, 2013 15:58:50
  13. 13 楼 axiu

    width: 60px;height: 120px;background: #9C0505;box-shadow: 0 0 60px #C20101,inset 0 0 10px #FF9B9B;这样会好些。(噗……我为什么要做这个。-_-|||

    四月 13, 2013 16:09:53
  14. 14 楼 大发

    标签名能优雅点么。我操

    四月 13, 2013 17:19:30
  15. 15 楼 阿龍

    血腥~~~~ :cao:

    四月 13, 2013 18:16:10
  16. 16 楼 Tokin

    怎么以前没发现发叔如此没节操 :xia:

    四月 13, 2013 19:02:14
  17. 17 楼 619影视

    这是大发的啊,量很大嘛! :cool:

    四月 13, 2013 20:02:03
  18. 18 楼 郑永

    看到这个我已经无语,只能用当年流行的那句话:很黄很暴力~

    四月 13, 2013 20:47:43
  19. 19 楼 郑永

    阿修哥的建议。。。汗。。

    四月 13, 2013 20:54:30
  20. 20 楼 技术宅

    节操何在

    四月 13, 2013 21:04:57
  21. 21 楼 公子

    :cool: 口味不一般。。。

    四月 13, 2013 21:20:30
  22. 22 楼 仰肖

    重品味

    四月 13, 2013 21:49:04
  23. 23 楼 airoschou

    .jj class名字用的真好! :fue:

    四月 13, 2013 22:10:34
  24. 24 楼 夜枫

    我看到了很多很多的“jianjian”,让人邪恶一番…. :fue:

    四月 14, 2013 13:28:37
  25. 25 楼 xsinger

    夜用的吗?

    四月 14, 2013 18:02:03
  26. 26 楼 所谓刚子

    我去 咋这么血腥呢。。。太牛逼了!

    四月 14, 2013 19:49:09
  27. 27 楼 佐仔

    小蝴蝶,你也太牛了吧。有个性的程序猿。

    四月 14, 2013 19:49:54
  28. 28 楼 Lucius

    这滴血的卫生巾看着我心疼直颤啊

    四月 14, 2013 20:42:47
  29. 29 楼 零落千起

    你够了…

    四月 14, 2013 22:39:55
  30. 30 楼 梦月酱

    好吧 你们都狠

    四月 15, 2013 02:44:20
  31. 31 楼 SEO博客

    太暴力了。没想到你口味还挺重啊。

    四月 15, 2013 09:38:02
  32. 32 楼 figo

    口味要如何之重才能有此创意!!! :han:

    四月 15, 2013 20:05:27
  33. 33 楼 xinsenz

    :sui: 你又调皮了,我晕~~

    四月 15, 2013 20:57:17
  34. 34 楼 歪扑猫

    好大的创可贴

    四月 16, 2013 11:03:21
  35. 35 楼 灰狼

    姐,不得不赞你,太强大了。。。 :fue:

    四月 16, 2013 12:13:40
  36. 36 楼 婚纱摄影

    这篇文章比较实用呢 博主辛苦了~

    四月 16, 2013 15:45:13
  37. 37 楼 潜行者m

    重口啊哈。

    四月 16, 2013 22:36:30
  38. 38 楼 DruidFY

    我艹!小蝴蝶你的节操!

    四月 16, 2013 22:37:31
  39. 39 楼 huangjun

    呃,图片看起来简单,代码却好多! :cao:

    四月 16, 2013 22:51:59
  40. 40 楼 方露宇

    - -div的标签是亮点。。。哪来的那么多jj= =

    四月 20, 2013 18:26:29
  41. 41 楼 小故事

    :sui: 真是太血腥了

    四月 21, 2013 02:18:40
  42. 42 楼 OOCLER

    你和大发可真都没节操啊~

    四月 21, 2013 12:26:18
  43. 43 楼 小五

    ca 口味这么重?

    四月 22, 2013 22:27:24
  44. 44 楼 Vind

    这个你也拿来玩?!

    四月 24, 2013 09:43:09
  45. 45 楼 Study

    把鼠标onmouseover在 侧栏->链接->见见 后,会出现两个卫生巾

    四月 24, 2013 19:36:04
  46. 46 楼 龟兔赛跑

    好吧 ,你真厉害..

    六月 3, 2013 14:06:53
  47. 47 楼 W3Cshare

    很黄很暴力

    六月 7, 2013 12:57:50
  48. 48 楼 kn007

    邪恶

    七月 21, 2013 19:44:07