您的位置：首页 > Web前端 > CSS

纯css竟可以做出边框这样长宽度的过渡效果

2018-10-26 20:44 78 查看

边框效果如下：鼠标移到下面方形，就有效果

.customS { width: 200px; height: 200px; background-color: #ccc; position: relative } .customS::before { content: ""; display: block; position: absolute; left: 0; top: 0; border: 2px solid transparent; width: 0; height: 0 } .customS::after { content: ""; display: block; position: absolute; right: 0; bottom: 0; width: 0; height: 0; border: 2px solid transparent } .customS:hover::after,.customS:hover::before { width: 100%; height: 100% } .customS:hover::before { border-top-color: red; border-right-color: red } .customS:hover::after { border-bottom-color: red; border-left-color: red }

要是没有效果，点这个：https://murenziwei.github.io/testGit/Untitled1.html

正如你所看到的，这边框颜色只用纯css3就做出来了，HTML忽略..

要想做出此效果，就得深入理解css3的transition过渡属性；我直接贴出代码，并注释：

<!DOCTYPE HTML>
<html>
<head>
<title>纯css竟可以做出边框这样长宽度的过渡效果</title>
<style>
.customS{
width:200px;height:200px;
background-color:#ccc;
position:relative;
}
.customS:before{
content:"";
display:block;
position:absolute;
left:0;
top:0;
border:2px solid transparent;
width:0;
height:0;
box-sizing:border-box;

/*
      css3的transition是有兼容性的，所以尽量用现代浏览器,也可以添加-webkit-、-o-、-ms-、-moz-在属性前面，例如：
      -webkit-transition:width 1s linear 2s;
      */
/*
我用的transition是个简化属性，值有4个。
语法：
transition：property duration timing-function delay
||(等同于四句属性)
transition-property:val||all//注释：设置过渡效果的css属性的名称，如果设置all就是指全部css属性
transition-duration:val//注释：完成过渡效果需要多少秒或多少毫秒，例如：transition-duration:1s或者是1000ms
transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);//注释：过渡效果的速度曲线？
linear    规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease    规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in    规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out    规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out    规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay:val//注释：定义过渡效果从何时开始
*/
transition:border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;

}
.customS:after{
content:"";
display:block;
position:absolute;
right:0;
bottom:0;
width:0;
height:0;
border:2px solid transparent;
box-sizing:border-box;
/*
鼠标移开目的地，以下面的transition属性为准来过渡，请好好理解下面的属性!一旦弄懂了它，就会做了
*/
transition:border-color 0s ease-out 0.4s,width 0.2s ease-out 0.2s,height 0.2s ease-out 0s;
}
.customS:hover:after,.customS:hover:before{

width:100%;
height:100%;
}
.customS:hover:before{
border-top-color:red;
border-right-color:red;
transition:border-color 0s ease-out 0s,width 0.2s ease-out 0s,height 0.2s ease-out 0.2s;
}
.customS:hover:after{
border-bottom-color:red;
border-left-color:red;
/*
鼠标移入目的地，以下面的transition属性为准来过渡，请好好理解下面的属性!一旦弄懂了它，就会做了
*/
transition:border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
}
</style>
</style>
</head>

<body>
<div class="bAn customS">

</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航