用CSS3画Icon(WebkitOnly)

html5 • • CSS3教程 • 3404 阅读

看到朱一那个用CSS做Icon的Blog( http://zyiangel.blogbus.com/logs/163538656.html )
于是我就手痒 也用CSS3做一个,因为用了一下哦webkit的专有属性,而其他浏览器还没有支持所以暂时为WebKitOnly
效果如下:

Demo http://hcg.im/demo/icon.html

代码

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Css3IconWebkitOnly</title>
  <style type="text/css">
    .icon{
      width:320px;
      height:300px;
      background-image:url(1.jpg);
      -webkit-border-radius: 10px;
      -webkit-box-reflect: below 2px -webkit-gradient(linear, 0 0, 0 150%, from(transparent), color-stop(.5, transparent), to(white));
    }
    .icon::after{
      content:'';
      position: absolute;
      width:320px;
      height:300px;
      background:-webkit-gradient(linear,0% 100%, 50% 10%, from(rgba(255,255,255,0)), to(rgba(255,255,255,0.8)));
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <div class="icon"></div>
</body>
</html>

转自：H黑科技

以上是用CSS3画Icon(WebkitOnly)的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>