首页 > 技术资源分享 > 纯CSS3的边框过度效果,实测攻略
2012
11-21

纯CSS3的边框过度效果,实测攻略

上一期介绍了CSS3 + jQuery 的放大镜效果实测。
这一期为大家带来边框过度的CSS3样式效果。
该效果完全由CSS3的 :hover事件 与 transition 样式组成,是不是觉得很炫?

代码测试:





CSS3边框过度效果_frontopen.com

















 

html部分:

<a href=”#” class=”one”></a>
<a href=”#” class=”two”></a>
<a href=”#” class=”three”></a>
<br />
<a href=”#” class=”yon”></a>
<a href=”#” class=”goo”></a>
<a href=”#” class=”rok”></a>
<a href=”#” class=”ryk”></a>
<br />
<a href=”#” class=”x7″></a>
<a href=”#” class=”x8″></a>
<a href=”#” class=”x9″></a>

 

CSS3部分:

body {
padding: 100px 20px;
}

a {
background-image:url(http://www.frontopen.com/wp-content/uploads/2012/11/car.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
background-origin: border-box;

display: inline-block; width: 100px; height: 100px;
border-width: 50px;
border-color: rgba(0,0,0,0);

border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}

a:hover {
border-width: 0;
border-color: rgba(0, 0, 0, 0.5);
}

.one{border-style: solid;}
.two{border-style: dashed;}
.three{border-style: dotted;}

.yon {border: 50px solid rgba(0, 0, 0, 0.7);}
.goo {border: 50px dashed rgba(0, 0, 0, 0.7);}
.rok {border: 50px dotted rgba(0, 0, 0, 0.7);}
.ryk {border: 50px double rgba(0, 0, 0, 0.7);}
.yon:hover{border: 1px solid rgba(0, 0, 0, 0.7);}
.goo:hover{border: 1px dashed rgba(0, 0, 0, 0.7);}
.rok:hover{border: 1px dotted rgba(0, 0, 0, 0.7);}
.ryk:hover{border: 1px double rgba(0, 0, 0, 0.7);}

.x7, .x8, .x9 {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
.x7 {border: 50px solid rgba(0, 0, 0, 0.7);}
.x8 {border: 50px dashed rgba(0, 0, 0, 0.7);}
.x9 {border: 50px dotted rgba(0, 0, 0, 0.7);}
.x7:hover {border: 1px solid rgba(0, 0, 0, 0.7);}
.x8:hover {border: 1px dashed rgba(0, 0, 0, 0.7);}
.x9:hover {border: 1px dotted rgba(0, 0, 0, 0.7);}
源文件:点击下载

最后编辑:
作者:品味人生
就是一个管理员,frontopen的管理员,嗯,介绍完毕!
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!