CSS3制作的QQ logo

/ 2评 / 0



  1. <!DOCTYPE html>   
  2. <html>   
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  4. <title>QQ</title>   
  5.     <head>   
  6.         <style>   
  7.                    
  8. .qq{ margin60px;}   
  9.   
  10. .head{   
  11.     width135px;   
  12.         height135px;   
  13.         positionabsolute;   
  14.         z-index: 7;   
  15.         background-color#201d27;   
  16.         border:4px solid #1c1d22;   
  17.         box-shadow: inset -2px 0px 2px #625d6d;   
  18.         -webkit-border-radius:135px 100px 150px 100px;   
  19.         -webkit-transform: rotate(-135deg);   
  20.            
  21.         -moz-border-radius:135px 100px 150px 100px;   
  22.         -moz-transform: rotate(-135deg);   
  23.         }   
  24.   
  25. .eye-left{   
  26.     positionabsolute;   
  27.     top: -66px;   
  28.     left53px;   
  29.     -webkit-transform: rotate(45deg);   
  30.            
  31.         -moz-transform: rotate(45deg);   
  32.         }   
  33.   
  34. .eye-rightright{   
  35.     position:absolute;   
  36.     top:-38px;   
  37.     left:25px;   
  38.         -webkit-transform: rotate(45deg);   
  39.            
  40.         -moz-transform: rotate(45deg);   
  41.         }   
  42.   
  43. .eye1{   
  44.     width:50px;   
  45.     height:50px;   
  46.     position:absolute;   
  47.     top:40px;   
  48.     left:90px;   
  49.     background:#fff;   
  50.     z-index:1;   
  51.     -webkit-border-radius:180px;   
  52.         -webkit-transform:rotatex(45deg);   
  53.            
  54.     -moz-border-radius:180px;   
  55.         -moz-transform:rotatex(45deg);   
  56.     }   
  57.            
  58. .eye2{   
  59.     width:22px;   
  60.     height:22px;   
  61.     position:absolute;   
  62.     top:60px;   
  63.     left:98px;   
  64.     background:#000;   
  65.     z-index:2;   
  66.     -webkit-border-radius:180px;   
  67.         -webkit-transform: rotatex(30deg);   
  68.            
  69.     -moz-border-radius:180px;   
  70.         -moz-transform: rotatex(30deg);   
  71.     }   
  72.                       
  73. .eye3{   
  74.     width:22px;   
  75.     height:22px;   
  76.     position:absolute;   
  77.     top:50px;   
  78.     left:98px;   
  79.     background:#000;   
  80.     z-index:2;   
  81.     -webkit-border-radius:180px;   
  82.         -webkit-transform: rotatex(30deg);   
  83.            
  84.     -moz-border-radius:180px;   
  85.         -moz-transform: rotatex(30deg);   
  86.     }   
  87.                    
  88. .eye4{   
  89.     width:6px;   
  90.     height:6px;   
  91.     position:absolute;   
  92.     top:75px;   
  93.     left:105px;   
  94.     background:#fff;   
  95.     z-index:3;   
  96.     -webkit-border-radius:180px;   
  97.         -webkit-transform: rotatex(30deg);   
  98.            
  99.     -moz-border-radius:180px;   
  100.         -moz-transform: rotatex(30deg);   
  101.     }   
  102.                    
  103. .eye5{   
  104.     width:6px;   
  105.     height:6px;   
  106.     position:absolute;   
  107.     top:50px;   
  108.     left:105px;   
  109.     background:#fff;   
  110.     z-index:3;   
  111.     -webkit-border-radius:180px;   
  112.         -webkit-transform: rotatex(30deg);   
  113.            
  114.     -moz-border-radius:180px;   
  115.         -moz-transform: rotatex(30deg);   
  116.     }   
  117.            
  118. .mouth-bc{   
  119.     width:60px;   
  120.     height:60px;   
  121.     position:absolute;   
  122.     top:12px;   
  123.     left:12px;   
  124.     background:#fff656;   
  125.         box-shadow: inset 1px 1px 35px #ff9a00;   
  126.     -webkit-border-radius:60px 10px 60px 10px ;   
  127.            
  128.     -moz-border-radius:60px 10px 60px 10px ;   
  129.         }   
  130.            
  131. .mouth-left{   
  132.         width50px;   
  133.         height60px;   
  134.         positionabsolute;   
  135.         left15px;   
  136.         top5px;   
  137.         border-color#201D27;   
  138.         border-stylesolid;   
  139.         border-width15px 0px 0 0px;   
  140.         z-index: 8;   
  141.         -webkit-border-radius: 0px 100px 0px 0px;   
  142.         -webkit-transform: rotate(-70deg);   
  143.            
  144.         -moz-border-radius: 0px 100px 0px 0px;   
  145.         -moz-transform: rotate(-70deg);   
  146.         }   
  147.   
  148. .mouth-rightright{   
  149.         width50px;   
  150.         height60px;   
  151.         positionabsolute;   
  152.         left15px;   
  153.         top5px;   
  154.         border-color#201D27;   
  155.         border-stylesolid;   
  156.         border-width15px 0px 0 0px;   
  157.         z-index: 8;   
  158.         -webkit-border-radius: 100px 0px 0px 0px;   
  159.         -webkit-transform: rotate(-25deg);   
  160.            
  161.         -moz-border-radius: 100px 0px 0px 0px;   
  162.         -moz-transform: rotate(-25deg);   
  163.         }   
  164.            
  165. .neck{   
  166.     width105px;   
  167.     height103px;   
  168.     positionabsolute;   
  169.     left81px;   
  170.     top106px;   
  171.     border-color#C71700;   
  172.     border-stylesolid;   
  173.     border-width15px 0 0 15px;   
  174.     z-index: 10;   
  175.     opacity: 0.5;   
  176.     -webkit-border-radius: 250px 35px 250px 35px;   
  177.     -webkit-transform: rotate(223deg);   
  178.            
  179.     -moz-border-radius: 250px 35px 250px 35px;   
  180.     -moz-transform: rotate(223deg);   
  181.     }   
  182.            
  183. .neck-bc{   
  184.     width105px;   
  185.     height105px;   
  186.     positionabsolute;   
  187.     left78px;   
  188.     top102px;   
  189.     border-color#730203;   
  190.     border-stylesolid;   
  191.     border-width20px 0 0 20px;   
  192.     z-index: 9;   
  193.     -webkit-border-radius: 250px 50px 250px 50px;   
  194.     -webkit-transform: rotate(224deg);   
  195.            
  196.     -moz-border-radius: 250px 50px 250px 50px;   
  197.     -moz-transform: rotate(224deg);   
  198.     }   
  199.   
  200. .neck1{   
  201.     width30px;   
  202.     height40px;   
  203.     positionabsolute;   
  204.     left83px;   
  205.     top185px;   
  206.     background-color#9a0d03;   
  207.     border3px solid #730203;   
  208.     z-index: 8;   
  209.     -webkit-border-radius: 50px 50px 0px 0px;   
  210.     -webkit-transform: rotate(185deg);   
  211.            
  212.     -moz-border-radius: 50px 50px 0px 0px;   
  213.     -moz-transform: rotate(185deg);   
  214.     }   
  215.            
  216. .body{   
  217.     width175px;   
  218.         height175px;   
  219.         background-color#201d27;   
  220.         positionabsolute;    
  221.         z-index: 6;   
  222.         top112px;   
  223.         left:53px;   
  224.         -webkit-border-radius: 150px;   
  225.            
  226.         -moz-border-radius: 150px;   
  227.         }   
  228.   
  229. .belly-bc{   
  230.     width145px;   
  231.         height140px;   
  232.         positionabsolute;   
  233.         left15px;   
  234.     top30px;   
  235.         background-color#d6e0eb;   
  236.         -webkit-border-radius: 145px 145px 140px 140px;   
  237.            
  238.         -moz-border-radius: 145px 145px 140px 140px;   
  239.         }   
  240.            
  241. .belly{   
  242.     width125px;   
  243.     height120px;   
  244.     positionabsolute;   
  245.     left25px;   
  246.     top40px;   
  247.     background-color#fff;   
  248.     box-shadow: 0px 5px 10px #fff;   
  249.     -webkit-border-radius: 125px 125px 120px 120px;   
  250.            
  251.     -moz-border-radius: 145px 145px 140px 140px;   
  252.         }   
  253.   
  254. .hand-left{   
  255.     width60px;   
  256.     height60px;   
  257.     positionabsolute;   
  258.     left23px;   
  259.     top180px;   
  260.     background#201D27;   
  261.         box-shadow: inset 2px 0px 2px #625d6d;   
  262.     -webkit-border-radius: 60px 10px 60px 10px;   
  263.     -webkit-transform: rotate(-30deg);   
  264.            
  265.     -moz-border-radius: 60px 10px 60px 10px;   
  266.     -moz-transform: rotate(-30deg);   
  267.     }   
  268.   
  269. .hand-rightright{   
  270.     width60px;   
  271.     height60px;   
  272.     positionabsolute;   
  273.     left198px;   
  274.     top180px;   
  275.     background#201D27;   
  276.         box-shadow: inset -2px 0px 2px #625d6d;   
  277.     -webkit-border-radius: 10px 60px 10px 60px;   
  278.     -webkit-transform: rotate(30deg);   
  279.            
  280.     -moz-border-radius: 10px 60px 10px 60px;   
  281.     -moz-transform: rotate(30deg);   
  282.     }   
  283.   
  284. .foot-left{   
  285.     width70px;   
  286.     height50px;   
  287.     positionabsolute;   
  288.     left53px;   
  289.     top255px;   
  290.     background-color#FFF656;   
  291.         border3px solid #7F2D0C;   
  292.         -webkit-box-shadow: inset 0px 0px 60px #F07305;   
  293.     -webkit-border-radius: 250px 50px 250px 50px;   
  294.     -webkit-transform: rotate(30deg);   
  295.            
  296.         -moz-box-shadow: inset 0px 0px 35px #F07305;   
  297.     -moz-border-radius: 250px 50px 250px 50px;   
  298.     -moz-transform: rotate(30deg);   
  299.         }   
  300.   
  301. .foot-rightright{   
  302.     width70px;   
  303.     height50px;   
  304.     positionabsolute;   
  305.     left148px;   
  306.     top255px;   
  307.     background-color#FFF656;   
  308.         border3px solid #7F2D0C;   
  309.         -webkit-box-shadow: inset 0px 0px 60px #F07305;   
  310.     -webkit-border-radius: 50px 250px 50px 250px;   
  311.     -webkit-transform: rotate(-30deg);   
  312.            
  313.         -moz-box-shadow: inset 0px 0px 35px #F07305;   
  314.     -moz-border-radius: 50px 250px 50px 250px;   
  315.     -moz-transform: rotate(-30deg);   
  316.     }   
  317.   
  318.     </style>   
  319.     </head>   
  320.     <body>   
  321.         <div class="qq">   
  322.                         <!--颈巾-->   
  323.             <div class="neck-bc"></div>   
  324.                         <div class="neck"></div>   
  325.                         <div class="neck1"></div>   
  326.                         <!--头部-->   
  327.             <div class="head">   
  328.                             <div class="eye-left">   
  329.                                     <div class="eye1"></div>   
  330.                     <div class="eye2"></div>   
  331.                                         <div class="eye4"></div>   
  332.                                 </div>   
  333.                             <div class="eye-right">   
  334.                                     <div class="eye1"></div>   
  335.                     <div class="eye3"></div>   
  336.                                         <div class="eye5"></div>   
  337.                                 </div>   
  338.                                 <div class="mouth-bc"></div>   
  339.                                 <div class="mouth-left"></div>   
  340.                                 <div class="mouth-right"></div>   
  341.                         </div>   
  342.                         <!--肚子-->   
  343.             <div class="body">   
  344.                             <div class="belly-bc"></div>   
  345.                                 <div class="belly"></div>   
  346.                         </div>   
  347.                     <!--手部-->   
  348.                         <div class="hand-left"></div>   
  349.             <div class="hand-right"></div>   
  350.                         <!--脚部-->   
  351.                         <div class="foot-left">   
  352.                             <div class="foot-left1"></div>   
  353.                                 <div class="foot-left2"></div>   
  354.                         </div>   
  355.             <div class="foot-right"></div>   
  356.         </div>   
  357.     </body>   
  358. </html>  

扫码关注我的微信公众号 安防视频监控知识

微信公众号ID:ipc-name

2 responses to “CSS3制作的QQ logo”

  1. 朴人博客 says:

    这个够强大,收藏下

Leave a Reply

Your email address will not be published. Required fields are marked *