无敌css3制作新浪LOGO

作者: 关于计算机  发布:2019-11-23

请使用扶持CSS3的浏览器查看效果:

请使用协助CSS3的浏览器查看效果:

效果图:
图片 1

效果图:
图片 2

 

 

完整代码如下:

全体代码如下:

 CSS3新浪LOGO-柯乐义






























































































































































































































 查看效果
  1 <html>    2 <head>    3 <title>CSS3新浪LOGO-柯乐义</title>    4 <style>    5 .sina{ margin:60px 0 0 22px;}    6 .head{ position:relative; width:195px; height:220px;}    7 .head_bg{ position:absolute; width:200px; height:175px; background:#ab2b41; left:6px; z-index:6;    8 -moz-border-radius-topleft:200px 180px;    9 -moz-border-radius-topright: 200px 180px;   10 -moz-border-radius-bottomleft: 200px 180px;   11 -moz-border-radius-bottomright: 200px 180px;   12 -webkit-border-radius:200px 180px;   13 -moz-transform: rotate(-6deg);   14 -webkit-transform:rotate(-6deg);   15 -moz-box-shadow:1px 4px 3px #333;   16 -webkit-box-shadow:1px 4px 3px #333;   17 border:1px solid #c03461;   18 }   19 .head_top{  position:absolute; top:-3px; left:5px; width:197px; height:167px;z-index:7;   20 -moz-border-radius-topleft:200px 180px;   21 -moz-border-radius-topright:200px 180px;   22 -moz-border-radius-bottomleft:200px 180px;   23 -moz-border-radius-bottomright:200px 180px;   24 -webkit-border-radius:200px 180px;   25 -moz-transform:rotate(-6deg);   26 -webkit-transform:rotate(-6deg);   27 background: -moz-linear-gradient(left top, #e16591, #ce3551 50%);   28 background: -webkit-gradient(linear, 0 0, 0 50%, from(#e16591), to(#ce3551));   29 }   30 .head_shadow{ position:absolute; width:190px; height:162px;  top:2px; left:10px; z-index:8;   31 -moz-border-radius-topleft:200px 180px;   32 -moz-border-radius-topright:200px 180px;   33 -moz-border-radius-bottomleft:200px 180px;   34 -moz-border-radius-bottomright:200px 180px;   35 -webkit-border-radius:200px 180px;   36 background: -moz-linear-gradient(left top, white, #ce3552 50%);   37 background: -webkit-gradient(linear, left top, 10% 50%, from(#fff), to(#ce3552));   38 }   39 .head_a1{ width:54px; height:45px; position:absolute; top:-24px; right:32px;background:#d53960; z-index:5;   40 border:1px solid #c03461;   41 -moz-border-radius:180px 0;   42 -webkit-border-radius:180px 0 180px 0;   43 -moz-transform: rotate(-6deg);   44 -webkit-transform:rotate(-6deg);   45 -moz-box-shadow:4px 4px 0px #c03461;   46 -webkit-box-shadow:4px 4px 0px #c03461;   47 }   48 .head_a1 .top{width:100px; height:100px; position:absolute; top:-80px; right:-11px; background:#fff; z-index:1;   49 -moz-border-radius:135px;   50 -webkit-border-radius:135px;   51 }   52 .head_a1 .body{width:23px; height:23px; position:absolute; top:-10px; right:-3px; background:#d53960; z-index:2;   53 -moz-border-radius:135px 135px 135px 0;   54 -webkit-border-top-left-radius:135px;   55 -webkit-border-top-right-radius:135px;   56 -webkit-border-bottom-right-radius:135px;   57 -webkit-border-bottom-left-radius:0;   58 -moz-transform: rotate(-60deg);   59 -webkit-transform: rotate(-60deg);   60 -moz-box-shadow:3px 4px 0px #c03461;   61 -webkit-box-shadow:3px 4px 0px #c03461;   62 }   63 .head_a1 .shadow{width:19px; height:19px; position:absolute; top:-8px; right:-2px; z-index:3;   64 -moz-border-radius:135px 135px 135px 0;   65 -webkit-border-radius:135px 135px 135px 0;   66 -moz-transform: rotate(-60deg);   67 -webkit-transform: rotate(-60deg);   68 background: -moz-linear-gradient(top, white, #ce3552 50%);   69 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));   70 }   71 .head_a2{ width:60px; height:45px; position:absolute; top:-22px; right:-13px;background:#d53960; z-index:4;   72 border:1px solid #c03461;   73 -moz-border-radius:180px 0;   74 -webkit-border-radius:180px 0 180px 0;   75 -moz-transform: rotate(-10deg);   76 -webkit-transform: rotate(-10deg);   77 -moz-box-shadow:4px 4px 0px #c03461;   78 -webkit-box-shadow:4px 4px 0px #c03461;   79 }   80 .head_a2 .top{width:40px; height:38px; position:absolute; top:-12px; right:7px; background:#fff; z-index:1;   81 -moz-border-radius:180px 0 180px 0;   82 -webkit-border-radius:180px 0 180px 0;   83 -moz-transform: rotate(20deg);   84 -webkit-transform: rotate(20deg);   85 }   86 .head_a2 .body{width:23px; height:23px; position:absolute; top:-10px; right:-3px; background:#d53960; z-index:2;   87 -moz-border-radius:135px 135px 135px 0;   88 -webkit-border-radius:135px 135px 135px 0;   89 -moz-transform: rotate(-60deg);   90 -webkit-transform: rotate(-60deg);   91 -moz-box-shadow:3px 4px 0px #c03461;   92 -webkit-box-shadow:3px 4px 0px #c03461;   93 }   94 .head_a2 .shadow{width:19px; height:19px; position:absolute; top:-8px; right:-1px; z-index:3;   95 -moz-border-radius:135px 135px 135px 0;   96 -webkit-border-radius:135px 135px 135px 0;   97 -moz-transform: rotate(-60deg);   98 -webkit-transform: rotate(-60deg);   99 background: -moz-linear-gradient(top, white, #ce3552 50%);  100 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));  101 }  102 .head_a3{ width:80px; height:47px; position:absolute; top:6px; right:-46px;background:#d53960; z-index:3;  103 border:1px solid #c03461;  104 -moz-border-radius:100px 0 110px 0;  105 -webkit-border-radius:100px 0 110px 0;  106 -moz-transform: rotate(-10deg);  107 -webkit-transform: rotate(-10deg);  108 -moz-box-shadow:4px 4px 0px #c03461;  109 -webkit-box-shadow:4px 4px 0px #c03461;  110 }  111 .head_a3 .top{width:67px; height:38px; position:absolute; top:-18px; right:15px; background:#fff; z-index:1;  112 -moz-border-radius:180px 0 180px 0;  113 -webkit-border-radius:180px 0 180px 0;  114 -moz-transform: rotate(40deg);  115 -webkit-transform: rotate(40deg);  116 }  117 .head_a3 .body{width:23px; height:23px; position:absolute; top:-8px; right:-1px; background:#d53960; z-index:2;  118 -moz-border-radius:135px 135px 135px 0;  119 -webkit-border-radius:135px 135px 135px 0;  120 -moz-transform: rotate(-72deg);  121 -webkit-transform: rotate(-72deg);  122 -moz-box-shadow:3px 4px 0px #c03461;  123 -webkit-box-shadow:3px 4px 0px #c03461;  124 }  125 .head_a3 .shadow{width:19px; height:19px; position:absolute; top:-6px; right:0px; z-index:3;  126 -moz-border-radius:135px 135px 135px 0;  127 -webkit-border-radius:135px 135px 135px 0;  128 -moz-transform: rotate(-60deg);  129 -webkit-transform: rotate(-60deg);  130 background: -moz-linear-gradient(top, white, #ce3552 50%);  131 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));  132 }  133 .head_a4{ width:80px; height:47px; position:absolute; top:44px; right:-55px; background:#d53960; z-index:2;  134 border:1px solid #c03461;  135 -moz-border-radius:80px 0 110px 0;  136 -webkit-border-radius:80px 0 110px 0;  137 -moz-transform: rotate(8deg);  138 -webkit-transform: rotate(8deg);  139 -moz-box-shadow:4px 4px 0px #c03461;  140 -webkit-box-shadow:4px 4px 0px #c03461;  141 }  142 .head_a4 .top{width:67px; height:38px;position:absolute; top:-18px; right:13px; background:#fff; z-index:1;  143 -moz-border-radius:180px 0 180px 0;  144 -webkit-border-radius:180px 0 180px 0;  145 -moz-transform: rotate(40deg);  146 -webkit-transform: rotate(40deg);  147 }  148 .head_a4 .body{width:23px; height:23px; position:absolute; top:-9px; right:-2px; background:#d53960; z-index:2;  149 -moz-border-radius:135px 135px 135px 0;  150 -webkit-border-radius:135px 135px 135px 0;  151 -moz-transform: rotate(-70deg);  152 -webkit-transform: rotate(-70deg);  153 -moz-box-shadow:3px 4px 0px #c03461;  154 -webkit-box-shadow:3px 4px 0px #c03461;  155 }  156 .head_a4 .shadow{width:19px; height:19px; position:absolute; top:-7px; right:-1px; z-index:3;  157 -moz-border-radius:135px 135px 135px 0;  158 -webkit-border-radius:135px 135px 135px 0;  159 -moz-transform: rotate(-70deg);  160 -webkit-transform: rotate(-70deg);  161 background: -moz-linear-gradient(top, white, #ce3552 50%);  162 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));  163 }  164 .head_a5{ width:54px; height:45px; position:absolute; top:87px; right:-45px; background:#d53960; z-index:1;  165 border:1px solid #c03461;  166 -moz-border-radius:135px 0 180px 0;  167 -webkit-border-radius:135px 0 180px 0;  168 -moz-transform: rotate(35deg);  169 -webkit-transform: rotate(35deg);  170 -moz-box-shadow:4px 4px 0px #c03461;  171 -webkit-box-shadow:4px 4px 0px #c03461;  172 }  173 .head_a5 .top{width:100px; height:100px; position:absolute; top:-78px; right:-7px; background:#fff; z-index:1;  174 -moz-border-radius:135px;  175 -webkit-border-radius:135px;  176 }  177 .head_a5 .body{width:23px; height:23px; position:absolute; top:-6px; right:0px; background:#d53960; z-index:2;  178 -moz-border-radius:135px 135px 135px 0;  179 -webkit-border-radius:135px;  180 -moz-transform: rotate(-70deg);  181 -webkit-transform: rotate(-70deg);  182 -moz-box-shadow:3px 4px 0px #c03461;  183 -webkit-box-shadow:3px 4px 0px #c03461;  184 }  185 .head_a5 .shadow{width:19px; height:19px; position:absolute; top:-4px; right:2px; z-index:3;  186 -moz-border-radius:135px 135px 135px 0;  187 -webkit-border-radius:135px 135px 135px 0;  188 -moz-transform: rotate(-70deg);  189 -webkit-transform: rotate(-70deg);  190 background: -moz-linear-gradient(top, white, #ce3552 50%);  191 background: -webkit-gradient(linear, left top, 0 50%, from(#fff), to(#ce3552));  192 }  193 .eye{ position:absolute; top:47px; left:27px; width:161px; height:88px; z-index:10;  194 -moz-transform: rotate(-2deg);  195 -webkit-transform: rotate(-2deg);  196 }  197 .eye1{ position:absolute; top:57px; left:59px; width:8px; height:8px; background:#fff; z-index:5;  198 -moz-border-radius:180px;  199 -webkit-border-radius:180px;  200 }  201 .eye2{ position:absolute; top:29px; left:81px; width:22px; height:22px; background:#fff; z-index:4;  202 -moz-border-radius:180px;  203 -webkit-border-radius:180px;  204 }  205 .eye3{ position:absolute; top:25px; left:56px; width:47px; height:47px; background:#000; z-index:3;  206 -moz-border-radius:180px;  207 -webkit-border-radius:180px;  208 }  209 .eye4{ position:absolute; top:14px; left:46px; width:67px; height:67px; border:1px solid #312613; background:#66383d; z-index:2;  210 -moz-border-radius:180px;  211 -webkit-border-radius:180px;  212 -moz-box-shadow:0px 0px 5px #000;  213 -webkit-box-shadow:0px 0px 5px #000;  214 }  215 .eye5{ position:absolute; top:1px; left:8px; width:137px; height:86px; background:#fff; z-index:1;  216 border-top:5px solid #999;border-left:5px solid #999;  217 -moz-border-radius:300px 30px 300px 30px;  218 -webkit-border-radius:300px 30px 300px 30px;  219 -moz-transform: rotate(20deg);  220 -webkit-transform: rotate(20deg);  221 -moz-box-shadow:0px -7px 0 #ec9dc2;  222 -webkit-box-shadow:0px -7px 0 #ec9dc2;}  223 </style>  224 </head>  225 <body>  226 <a href="http://keleyi.com/a/bjad/6lu3dgj8.htm">查看效果</a>  227 <div class="sina">  228   <div class="head">  229     <div class="head_bg"></div>  230     <div class="head_top"></div>  231     <div class="head_shadow"></div>  232     <div class="head_a1">  233       <div class="top"></div>  234       <div class="body"></div>  235       <div class="shadow"></div>  236     </div>  237     <div class="head_a2">  238       <div class="top"></div>  239       <div class="body"></div>  240       <div class="shadow"></div>  241     </div>  242     <div class="head_a3">  243       <div class="top"></div>  244       <div class="body"></div>  245       <div class="shadow"></div>  246     </div>  247     <div class="head_a4">  248       <div class="top"></div>  249       <div class="body"></div>  250       <div class="shadow"></div>  251     </div>  252     <div class="head_a5">  253       <div class="top"></div>  254       <div class="body"></div>  255       <div class="shadow"></div>  256    </div>  257     <div class="eye">  258       <div class="eye1"></div>  259       <div class="eye2"></div>  260       <div class="eye3"></div>  261       <div class="eye4"></div>  262       <div class="eye5"></div>  263     </div>  264   </div>  265 </div>  266 </body>  267 </html>

web前端:

web前端:

效果图: 完整代码如下: CSS3和讯LOGO-柯乐义 查看效果 web前端:...


本文由今晚开什么码发布于关于计算机,转载请注明出处:无敌css3制作新浪LOGO

关键词:

上一篇:容斥原理,欧拉函数
下一篇:没有了