純css竟可以做出邊框這樣長寬度的過渡效果
阿新 • • 發佈：2018-10-27
語法 style property abs pan 兼容 css3 min htm
邊框效果如下：鼠標移到下面方形，就有效果
要是沒有效果，點這個：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竟可以做出邊框這樣長寬度的過渡效果