边框效果如下：鼠标移到下面方形，就有效果
要是没有效果，点这个：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>纯css竟可以做出边框这样长宽度的过渡效果
原文地址：https://www.cnblogs.com/murenziwei/p/9858647.html