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

杨伽蓝 · 发表于 2012-10-25 00:28:15

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

贴代码：
<!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>

		自动登录	找回密码
密码			立即注册