这里是文章内页的小广告~

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

品味人生 • 发布于 2019-02-01 21:37:02

这个家伙很害羞,不想介绍自己!

上一期介绍了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);}
源文件:点击下载