zoukankan      html  css  js  c++  java
  • 强大css3制作新浪LOGO 胜过PS

    请使用支持CSS3的浏览器查看效果:
    http://keleyi.com/a/bjad/6lu3dgj8.htm


    效果图:

    完整代码如下:

      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前端:http://www.cnblogs.com/jihua/p/webfront.html

  • 相关阅读:
    vs2012 切换语言
    extjs 多维数组支持
    Extjs: 对象不支持“createContextualFragment”属性或方法
    Servlet学习五——流的分发
    Servlet学习四——传输文本
    Servlet学习三——传输文件
    Servlet学习二——doGet和doPost
    Java处理Excel整理篇
    ORA-01033: ORACLE 正在初始化或关闭 进程 ID: 0 会话 ID: 0 序列号: 0
    Servlet学习一
  • 原文地址:https://www.cnblogs.com/jihua/p/css3sinalogo.html
Copyright © 2011-2022 走看看