设为首页收藏本站
切换到宽版

PHPIN.NET

 找回密码
 立即注册
PHPIN.NET»论坛 › 网页前端技术 › 网页综合特效 › CSS3 QQ企鹅妹妹
返回列表 发新帖
查看: 5365|回复: 0

[HTML5/CSS3] CSS3 QQ企鹅妹妹

[复制链接]
admin

469

主题

31

回帖

5507

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5507
发表于 2014-8-9 12:05:53 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
CSS3 QQ企鹅妹妹

效果图.jpg

实例代码：
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>QQ企鹅</title>
  6. <style>
  7. *{margin:0;padding:0;}
  8. div{position:absolute;}
  9. .qq_body{width:470px;height:540px;left:100px;top:100px;}
  10. /*QQ头部*/
  11. .head{z-index:0;left:65px;top:0;width:345px;height:367px;background:#19161A;border-radius:50%;}
  12. /*QQ眼睛*/
  13. .lefteye,.righteye{width:66px;height:99px;border-radius:50%;background:#fff;left:153px;top:76px;z-index:7;overflow:hidden;}
  14. .eyeball{width:30px;height:42px;background:#201E1F;border-radius:50%;left:28px;top:34px;}
  15. .eyeball .eyewhite{width:11px;height:18px;background:#fff;border-radius:50%;left:12px;top:12px;}
  16. .righteye{left:245px;}
  17. .righteye .eyeball{left:11px;}
  18. .eyeshadow{width:66px;height:99px;border-radius:50%;background:rgba(255,153,204,0.9);clip:rect(0 66px 33px 0)}
  19. .eyeshadowwhite{width:65px;height:54px;border-radius:50%;background:rgba(255,255,255,1);top:20px;}
  20. .eyelash_l_1,.eyelash_r_1{width:44px;height:44px;border-bottom:2px solid #F6F;border-radius:50%;top:67px;z-index:8}
  21. .eyelash_l_1{transform:rotate(15deg);-moz-transform:rotate(15deg);-webkit-transform:rotate(15deg);left:120px;}
  22. .eyelash_r_1{transform:rotate(340deg);-moz-transform:rotate(340deg);-webkit-transform:rotate(340deg);right:124px;}
  23. .eyelash_l_2,.eyelash_r_2{width:44px;height:44px;border-radius:50%;top:60px;z-index:8}
  24. .eyelash_l_2{transform:rotate(125deg);-moz-transform:rotate(125deg);-webkit-transform:rotate(125deg);left:123px;border-right:2px solid #F6F;}
  25. .eyelash_r_2{transform:rotate(245deg);-moz-transform:rotate(245deg);-webkit-transform:rotate(245deg);right:124px;border-left:2px solid #F6F;}
  26. /*QQ嘴巴*/
  27. .mouth_box{width:344px;height:188px;top:102px;left:66px;border-radius:50%;z-index:6;background:#19161A;}
  28. .mouth{width:234px;height:70px;border-radius:50%;background:#FC9202;left:52px;bottom:35px;}
  29. .mouth .mark{width:160px;height:84px;border:8px solid #201E1F;border-left:1px solid #201E1F;border-right:1px solid #201E1F;border-radius:50%;clip:rect(65px 160px 100px 0);left:32px;top:-25px;}
  30. /*QQ蝴蝶结*/
  31. .bowknot{width:200px;height:80px;left:250px;top:0;z-index:9;transform:rotate(35deg);-moz-transform:rotate(35deg);-webkit-transform:rotate(35deg);-o-transform:rotate(35deg);}
  32. .bowknot_l{width:40%;height:80px;background:#F02F72;border-radius:40px 95px 95px 40px;left:0;border:1px solid #F3F;}
  33. .bowknot_c{width:20%;height:60px;background:#F02F72;border-radius:30px;left:30%;top:10px;border:1px solid #F3F;z-index:10;box-shadow:0 0 5px 3px rgba(0,0,0,0.2)}
  34. .bowknot_r{width:40%;height:80px;background:#F02F72;border-radius:95px 40px 40px 95px;left:40%;}
  35. .bowknot_tip_l,.bowknot_tip_r{width:6px;height:35px;border-radius:50%;background:rgba(255,255,255,1);top:20px;z-index:11;}
  36. .bowknot_tip_l{left:-4px;border-right:1px solid #F3F;}
  37. .bowknot_tip_r{right:36px;border-left:1px solid #F3F;}
  38. .bowknot_line1{width:55px;height:25px;border-bottom:3px solid rgba(102,102,102,0.4);transform:rotate(-20deg);-moz-transform:rotate(-10deg);-webkit-transform:rotate(-10deg);-o-transform:rotate(-10deg);top:9px;left:0;border-radius:20%;}
  39. .bowknot_line2{width:45px;height:25px;border-top:2px solid rgba(102,102,102,0.6);transform:rotate(10deg);-moz-transform:rotate(10deg);-webkit-transform:rotate(10deg);-o-transform:rotate(10deg);top:42px;left:0;border-radius:20%;}
  40. .bowknot_line3{width:45px;height:25px;border-bottom:3px solid rgba(102,102,102,0.4);transform:rotate(10deg);-moz-transform:rotate(10deg);-webkit-transform:rotate(10deg);-o-transform:rotate(10deg);top:5px;right:0;border-radius:20%;}
  41. .bowknot_line4{width:55px;height:25px;border-top:1px solid rgba(102,102,102,0.6);transform:rotate(-10deg);-moz-transform:rotate(-10deg);-webkit-transform:rotate(-10deg);-o-transform:rotate(-10deg);top:39px;right:0;border-radius:20%;}
  42. /*QQ身体*/
  43. .belly{width:385px;height:322px;left:45px;top:185px;z-index:1;background:#19161A;border-radius:50%;}
  44. .belly_white{width:315px;height:250px;background:#fff;border-radius:50%;left:34px;bottom:10px;}
  45. /*QQ围巾*/
  46. .scarf{width:355px;height:198px;background:#F02F72;border-radius:50%;z-index:5;left:60px;top:155px;box-shadow:0 5px 10px rgba(0,0,0,0.4),0 0 30px rgba(0,0,0,0.3) inset;}
  47. .scarf_d{width:80px;height:110px;border-radius:15px 15px 18px 35px;;background:#F02F72;left:110px;top:325px;transform:rotate(15deg);-moz-transform:rotate(15deg);-webkit-transform:rotate(15deg);-o-transform:rotate(15deg);z-index:4;box-shadow:0 3px 10px rgba(0,0,0,0.4),0 0 30px rgba(0,0,0,0.3) inset;}
  48. /*QQ翅膀*/
  49. .leftwing,.rightwing{width:50px;height:170px;background:#1A1624;border-radius:50%;top:270px;}
  50. .leftwing{left:10px;transform:rotate(25deg);-moz-transform:rotate(25deg);-webkit-transform:rotate(25deg);-o-transform:rotate(25deg);}
  51. .rightwing{right:10px;transform:rotate(-25deg);-moz-transform:rotate(-25deg);-webkit-transform:rotate(-25deg);-o-transform:rotate(-25deg);}
  52. /*QQ脚掌*/
  53. .leftsole,.rightsole{width:157px;height:82px;background:#F07203;top:455px;border-radius:50%;border:3px solid #872E0C;box-shadow:0 0 20px 5px rgba(0,0,0,0.3);}
  54. .leftsole{left:55px;transform:rotate(-5deg);-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);}
  55. .rightsole{right:55px;transform:rotate(5deg);-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);}
  56. .leftsole .toe,.rightsole .toe{width:60px;height:22px;background:#F07203;border-radius:50%;border-top:1px solid #872E0C;}
  57. .leftsole .toe{transform:rotate(-20deg);-moz-transform:rotate(-20deg);-webkit-transform:rotate(-20deg);border-left:3px solid #872E0C;}
  58. .rightsole .toe{right:0;transform:rotate(20deg);-moz-transform:rotate(20deg);-webkit-transform:rotate(20deg);border-right:3px solid #872E0C;}
  59. </style>
  60. </head>
  61. <body>
  62. <div class="qq_body">
  63. <div class="head"></div>
  64. <div class="bowknot">
  65. <div class="bowknot_l">
  66. <div class="bowknot_line3"></div>
  67. <div class="bowknot_line4"></div>
  68. </div>
  69. <div class="bowknot_c"></div>
  70. <div class="bowknot_r">
  71. <div class="bowknot_line1"></div>
  72. <div class="bowknot_line2"></div>
  73. </div>
  74. <div class="bowknot_tip_l"></div>
  75. <div class="bowknot_tip_r"></div>
  76. </div>
  77. <div class="eyelash_l_1"></div>
  78. <div class="eyelash_l_2"></div>
  79. <div class="eyelash_r_1"></div>
  80. <div class="eyelash_r_2"></div>
  81. <div class="lefteye">
  82. <div class="eyeshadow"></div>
  83. <div class="eyeshadowwhite"></div>
  84. <div class="eyeball">
  85. <div class="eyewhite"></div>
  86. </div>
  87. </div>
  88. <div class="righteye">
  89. <div class="eyeshadow"></div>
  90. <div class="eyeshadowwhite"></div>
  91. <div class="eyeball">
  92. <div class="eyewhite"></div>
  93. </div>
  94. </div>
  95. <div class="mouth_box">
  96. <div class="mouth">
  97. <div class="mark"></div>
  98. </div>
  99. </div>
  100. <div class="belly">
  101. <div class="belly_white"></div>
  102. </div>
  103. <div class="scarf"></div>
  104. <div class="scarf_d"></div>
  105. <div class="leftwing"></div>
  106. <div class="rightwing"></div>
  107. <div class="leftsole">
  108. <div class="toe"></div>
  109. </div>
  110. <div class="rightsole">
  111. <div class="toe"></div>
  112. </div>
  113. </div>
  114. </body>
  115. </html>
复制代码
CSS3, css3S实例, CSS3特效, QQ企鹅妹妹

相关帖子
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2024-4-20 07:14

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表