您的位置：首页 > 其它

幽灵按钮

2015-07-09 13:50 399 查看

[b]思路[/b]

按钮特效：在按钮的上下左右各置一个点，鼠标经过是令点的宽（或高）、位置改变

tiptool：鼠标经过时tiptool的位置发生变化

知识点

1 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

参数：content-box（指盒子的宽度=width+border+padding+margin,默认值）

border-box(指盒子的宽度=width)

兼容性

2、过渡、位移、圆角参照css3系列文章

html代码

<body>
<div class="box">
<a>
<p>this is home demo<span></span></p>
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
Home
</a>
<a>
<p>this is about  demo<span></span></p>
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
About
</a>
<a>
<p>this is contact demo<span></span></p>
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
contact
</a>
</div>
</body>

css

<style type="text/css">
*{margin:0;padding: 0;}
body{background: #333;}
.box{width: 700px;margin: 340px auto;}
a{display:inline-block;text-decoration: none;width: 180px; height: 50px;line-height:50px;position:relative;margin: 0px 20px;color:#2DCB70;border:2px solid rgba(255,255,255,0.8);
font-weight:bold;font-size:18px;text-decoration:none;font-family:Arial; padding-left: 20px;
text-transform: uppercase;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
/*box-sizing 属性允许以特定的方式匹配某个区域的特定元素
参数：content-box（指盒子的宽度=width+border+padding+margin,默认值）
border-box(指盒子的宽度=width)
*/
-moz-transition:ease 0.4s;
-o-transition:ease 0.4s;
-webkit-transition:ease 0.4s;
transition:ease 0.4s;
}
a:hover{background-position: 140px center; border:2px solid rgba(255,255,255,1);}
.line{ display: block; position: absolute;
-webkit-transition:0.4s ease;
-moz-transition:0.4s ease;
-ms-transition:0.4s ease;
-o-transition:0.4s ease;
transition:0.4s ease;
}
a:hover .line{background:#fff;}
.line-top{width:0px; height:2px;left:-100%;top:-2px;}
a:hover .line-top{width:100%; left:-2px;}
.line-left{width:2px;height:0px;left:-2px;top:200%;}
a:hover .line-left{height:100%;top:-2px;}
.line-right{width:2px;height:0px;right:-2px;top:-100%;}
a:hover .line-right{height:100%;top:-2px;}
.line-bottom{width:0px;height:2px;left:200%; top:100%;}
a:hover .line-bottom{width:100%; left:-2px;}
/*tip*/
p{width:180px;position: absolute; background:#2DCB70;color:#fff;border-radius: 3px;bottom:200%;left: 50%;font-size:13px;font-weight: 500;padding:0px;text-align: center;opacity: 0;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
text-transform: lowercase;
box-sizing:border-box;
-webkit-transition:0.3s ease-in-out;
-moz-transition:0.3s ease-in-out;
-ms-transition:0.3s ease-in-out;
-o-transition:0.3s ease-in-out;
transition:0.3s ease-in-out;
}
p span{width:0px;height: 0px; border:8px solid transparent;border-top-color:#2DCB70;
position: absolute;bottom:-15px; left: 50%; margin-left: -8px;}
a:hover p{bottom:170%;opacity: 1;}
</style>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航