用纯css3仿ios水晶icon，仅支持webkit浏览器

最新推荐文章于 2024-07-15 20:04:30 发布

afp3151

最新推荐文章于 2024-07-15 20:04:30 发布

阅读量147

点赞数

文章标签：嵌入式

原文链接：http://www.cnblogs.com/RicardY/archive/2012/06/05/2536994.html

版权

这个话题国外的牛人做的多的不能再多了，还有用纯css3画了一个iphone4的，传送门：http://tjrus.com/iphone。就是感觉比较好玩吧我也炒下冷饭，用了一个晚上时间做了点评网的logo，效果比较一般，当做熟悉css3了。

按照国际惯例，只支持chrome浏览器。效果如下：

demo

贴代码：

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
      #logo{
          -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        transform: rotate(-10deg);position:relative;
        -webkit-transform-style: preserve-3d;
      }
      #logo .head{
          left:100px;
           top:10px;
        width: 200px; 
        background: #E9891B; 
        height: 200px;
        border: #CD954A 2px solid;
        -moz-border-radius: 100px; 
        border-radius: 100px; 
        box-shadow: 2px 2px 4px #999;
        position:absolute;
        z-index:3
      }
      #logo .arm{
        left:-50px;
           top:65px;
        width: 500px; 
        height: 250px;
        background: #E9891B; 
        border: #CD954A 2px solid;
        border-radius: 0 0 500px 500px;
        box-shadow: 2px 2px 4px #999;
        position:absolute;
        z-index:1
      }
      #logo .arm-overlay{
          left:30px;
           top:65px;
        width: 340px; 
        height: 170px;
        background: #fff; 
        border-left: #CD954A 2px solid;
        border-right: #CD954A 2px solid;
        border-bottom: #CD954A 2px solid;
        border-radius: 0 0 340px 340px;
        position:absolute;
        z-index:2
      }
      #logo .leg{
          left:-100px;
           top:320px;
        width: 600px; 
        height: 300px;
        background: #E9891B; 
        border: #CD954A 2px solid;
        border-radius: 600px 600px 0 0;
        box-shadow: 2px 0px 4px #999;
        position:absolute;
        z-index:1
      }
      #logo .leg-overlay{
          left: -10px;
        top: 413px;
        width: 420px;
        height: 210px;
        background: white;
        border-left: #CD954A 2px solid;
        border-right: #CD954A 2px solid;
        border-top: #CD954A 2px solid;
        border-radius: 420px 420px 0 0;
        -moz-box-shadow:2px -2px 4px #999 inset;               /* For Firefox3.6+ */
        -webkit-box-shadow:-2px 2px 4px #999 inset;            /* For Chrome5+, Safari5+ */
        box-shadow:-2px 2px 4px #999 inset;                    /* For Latest Opera */
        position: absolute;
        z-index: 2;
      }
      #icon{
          left: 700px;
        top: 100px;
        width: 176px;
        height: 176px;
        -webkit-border-radius: 30px;
        -webkit-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CF1B03), to(#F7CF4C));
        position: relative;
        z-index: 1;
      }
      .gloss {
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0.2)));
        height: 90px;
        width: 176px;
        position: relative;
        -webkit-border-top-right-radius: 38px;
        -webkit-border-top-left-radius: 38px;
        -webkit-border-bottom-right-radius: 120px 20px;
        -webkit-border-bottom-left-radius: 100px 20px;
        z-index: 5;
        -webkit-box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.7);
    }
    #icon .body{
        position: relative;
        top: -80px;
        left:-2px;
        -webkit-transform: rotate(-20deg);
        z-index: 2;
    }
    #icon .head{
        position: relative;
        width: 46px; 
        height: 46px;
        border: 0;
        -moz-border-radius: 23px; 
        border-radius: 23px; 
        color: white;
        margin: auto;
        background: #fff;
        z-index: 3;
        -webkit-box-shadow: 0px 0px 10px #B92301;
    }
    
    #icon .arm{
        position: relative;
        top: -28px;
        width: 68px;
        height: 34px;
        border: 17px solid white;
        border-top: 0;
        border-radius: 0 0 50px 50px;
        color: white;
        margin: auto;
        z-index: 3;
        background: transparent;
        -webkit-box-shadow: -1px 1px 1px rgba(209, 39, 7, 0.4),
                             1px 1px 1px rgba(209, 39, 7, 0.4);
    }
    #icon .leg{
        position: relative;
        top: -28px;
        width: 92px;
        height: 46px;
        border: 23px solid white;
        border-bottom: 0;
        border-radius: 92px 92px 0 0;
        color: white;
        margin: auto;
        z-index: 3;
        background: transparent;
        -webkit-box-shadow: -1px -1px 1px rgba(209, 39, 7, 0.4),
                             1px -1px 1px rgba(209, 39, 7, 0.4);
        
    }
  </style>
</head>
<BODY>
    <div style="width:1000px;margin:0 auto;position:relative;">
        <div id="logo">
           <div  class="head" ></div>
            <div class="arm"></div>
            <div class="arm-overlay"></div>
            <div class="leg"></div>
            <div class="leg-overlay"></div>
        </div>
        <div id="icon">
            <div class="gloss"></div>
            <div class="body">
                <div class="head"></div>
                <div class="arm"></div>
                <div class="leg"></div>
            </div>
        </div>
    </div>
<BODY>
</HTML>

转载于:https://www.cnblogs.com/RicardY/archive/2012/06/05/2536994.html

afp3151

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用纯css3仿ios水晶icon，仅支持webkit浏览器

这个话题国外的牛人做的多的不能再多了，还有用纯css3画了一个iphone4的，传送门：http://tjrus.com/iphone。就是感觉比较好玩吧我也炒下冷饭，用了一个晚上时间做了点评网的logo，效果比较一般，当做熟悉css3了。按照国际惯例，只支持chrome浏览器。效果如下：贴代码：<!DOCTYPE><html><...
复制链接

扫一扫