加载中…CSS3玻璃质感按纽
(2011-03-04 12:11:53)
标签：
css3直线渐变径向渐变倒影投影纯css动画吖真it |
分类： CSS3 |
最近在玩CSS3,发现它真的很神奇，看了那么多，当然要试下啦，于是就用它画了一个按钮，纯CSS实现：
很正点的效果哈，吖真在这里解释下原理：
1、首先建立一个div做为button底层，用radius设置圆角让它变成圆形，填充背景色，用gradient的radial径向渐变出按纽底部白色的反光；
2、再建立一个div里面建立一个span做左上角的玻璃高光，高光用绝对定位，用直线渐变的方法，在透明与白色之间切断，再做不透明度由浅到深过渡；
3、在div用text-shadow做个阴影效果，同时在里面建立一个i来放文字用margin-top来调整高度，要不然文字不会垂直居中；
4、用box-reflect做出底部倒影，拉个模板只显示上半部分；
这样就完成啦，是不是很漂亮? 感觉像个PS教程多点对吧，呵呵……
然后我做了一个鼠标滑过就变大的效果：
发现当元素变大时，蒙板居然没有用了，我做到透明到白色蒙板出现在眼前，这个目前还不懂怎么解决，等找到解决方法再修改或者发新文章。不过可以看到，当元素变大时，它不会出现锯齿，这个很值得一赞。
还有值得一提的就是在div.button上不能用overflow：hidden属性，否则reflect会给隐藏掉，倒影无效，这也反应了，倒影是跟div.button同一个元素上的，或者说受其限制。
下面奉上源代码，以供参考：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ background-color:#172739;}
.wrap{ margin:50px auto; width:1000px;}
.wrap .button{ width:100px; height:100px; text-align:center; font-size:50px; text-transform:uppercase; font-family:Arial; color:#fff; -webkit-border-radius:50px; border:1px solid #7b0e25;
background:#ca0500 -webkit-gradient(radial,60
60,60,50 120,0,from(#ca0500),to(rgba(255,255,255,0.6)));
position:relative; text-shadow:0px 0px 3px rgba(94,49,44,0.9);
-webkit-box-reflect:below 1px -webkit-gradient(linear,left top,left
bottom,from(transparent),color-stop(60%,transparent),color-stop(80%,rgba(255,255,255,0.2)),to(rgba(255,255,255,0.5)));}
.wrap .button:hover{ cursor:pointer; -webkit-transform: scale(2); -webkit-transition:-webkit-transform 2s ease-in;}
.wrap .button i{ font-style:normal; display:block; margin-top:18px;}
.wrap .button .highlight{ display:block; height:100px; width:100px; position:absolute; left:0px; top:0px; -webkit-border-radius:50px;background:-webkit-gradient(linear,left top,45%bottom,from(rgba(255,255,255,0.7)),color-stop(0.55,rgba(255,255,255,0.2)),color-stop(0.55,rgba(255,255,255,0))); }
</style>
</head>
<body>
<div class="wrap">
<div class="button"><span class="highlight"></span><i>m</i></div>
</div>
</body>
</html>
.wrap .button:hover做的效果是鼠标滑过出现动画，如果想鼠标滑出也出现动画，那就copy transition那句到.wrap .button即可，就会有个缓缓缩小到过程动画效果。
对哦，顺便提示下，要在webkit内核，比如chrome,safari才能看到哦，本来firefox也可以画的，不过我不想代码太复杂，就只做webkit了。
很正点的效果哈，吖真在这里解释下原理：
1、首先建立一个div做为button底层，用radius设置圆角让它变成圆形，填充背景色，用gradient的radial径向渐变出按纽底部白色的反光；
2、再建立一个div里面建立一个span做左上角的玻璃高光，高光用绝对定位，用直线渐变的方法，在透明与白色之间切断，再做不透明度由浅到深过渡；
3、在div用text-shadow做个阴影效果，同时在里面建立一个i来放文字用margin-top来调整高度，要不然文字不会垂直居中；
4、用box-reflect做出底部倒影，拉个模板只显示上半部分；
这样就完成啦，是不是很漂亮? 感觉像个PS教程多点对吧，呵呵……
然后我做了一个鼠标滑过就变大的效果：
发现当元素变大时，蒙板居然没有用了，我做到透明到白色蒙板出现在眼前，这个目前还不懂怎么解决，等找到解决方法再修改或者发新文章。不过可以看到，当元素变大时，它不会出现锯齿，这个很值得一赞。
还有值得一提的就是在div.button上不能用overflow：hidden属性，否则reflect会给隐藏掉，倒影无效，这也反应了，倒影是跟div.button同一个元素上的，或者说受其限制。
下面奉上源代码，以供参考：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ background-color:#172739;}
.wrap{ margin:50px auto; width:1000px;}
.wrap .button{ width:100px; height:100px; text-align:center; font-size:50px; text-transform:uppercase; font-family:Arial; color:#fff; -webkit-border-radius:50px; border:1px solid #7b0e25;
.wrap .button:hover{ cursor:pointer; -webkit-transform: scale(2); -webkit-transition:-webkit-transform 2s ease-in;}
.wrap .button i{ font-style:normal; display:block; margin-top:18px;}
.wrap .button .highlight{ display:block; height:100px; width:100px; position:absolute; left:0px; top:0px; -webkit-border-radius:50px;background:-webkit-gradient(linear,left top,45%bottom,from(rgba(255,255,255,0.7)),color-stop(0.55,rgba(255,255,255,0.2)),color-stop(0.55,rgba(255,255,255,0))); }
</style>
</head>
<body>
<div class="wrap">
<div class="button"><span class="highlight"></span><i>m</i></div>
</div>
</body>
</html>
.wrap .button:hover做的效果是鼠标滑过出现动画，如果想鼠标滑出也出现动画，那就copy transition那句到.wrap .button即可，就会有个缓缓缩小到过程动画效果。
对哦，顺便提示下，要在webkit内核，比如chrome,safari才能看到哦，本来firefox也可以画的，不过我不想代码太复杂，就只做webkit了。
喜欢
0
赠金笔