css如何实现这样的秒变效果呢
不用给这种复杂的图形描边，只要给一个div的border描边就行
当鼠标进入就给这个div的border加一个描边的效果，现在是直接的显示隐藏，感觉不好看。
求大神给一个demo或者方法，谢谢了先！
解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><title>Title</title><style> .linebox { position: relative; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: #e8e8e8; } .linebox-stroke > .line-t { -webkit-animation: stroke .4s; animation: stroke .4s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .linebox-stroke > .line-r { -webkit-animation: stroke .3s; animation: stroke .3s; -webkit-animation-delay: .4s; animation-delay: .4s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .linebox-stroke > .line-b { -webkit-animation: stroke .4s; animation: stroke .4s; -webkit-animation-delay: .7s; animation-delay: .7s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .linebox-stroke > .line-l { -webkit-animation: stroke .3s; animation: stroke .3s; -webkit-animation-delay: 1.1s; animation-delay: 1.1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .linebox-stroke-reverse > .line { transform: scale(1, 1); opacity: 1; } .linebox-stroke-reverse > .line-l { -webkit-animation: stroke-reverse 0.3s; animation: stroke-reverse 0.3s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .linebox-stroke-reverse > .line-b { -webkit-animation: stroke-reverse 0.4s; animation: stroke-reverse 0.4s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .linebox-stroke-reverse > .line-r { -webkit-animation: stroke-reverse 0.3s; animation: stroke-reverse 0.3s; -webkit-animation-delay: .7s; animation-delay: .7s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .linebox-stroke-reverse > .line-t { -webkit-animation: stroke-reverse 0.4s; animation: stroke-reverse 0.4s; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .line { position: absolute; background-color: red; transform: scale(0, 0); opacity: 0; } .line-t { transform-origin: left; width: 100%; height: 1px; top: 0; left: 0; } .line-r { height: 100%; width: 1px; top: 0; right: 0; transform-origin: top; } .line-b { width: 100%; height: 1px; bottom: 0; right: 0; transform-origin: right; } .line-l { height: 100%; width: 1px; bottom: 0; left: 0; transform-origin: bottom; } @keyframes stroke { 0% { transform: scale(0, 0); opacity: 0; } 100% { transform: scale(1, 1); opacity: 1; } } @keyframes stroke-reverse { 0% { transform: scale(1, 1); opacity: 1; } 100% { transform: scale(0, 0); opacity: 0; } }</style></head>
<body>
<div style="width:50%;height:400px;padding: 10px; position: relative; box-sizing: border-box; " >
<div class="linebox linebox-stroke-reverse"> <span class="line line-t"></span> <span class="line line-r"></span> <span class="line line-b"></span> <span class="line line-l"></span></div></div>
<script>
window.onload=function(){ var oDiv=document.querySelector('.linebox'); oDiv.onmouseenter=function(){ this.className="linebox linebox-stroke" } oDiv.onmouseleave=function(){ this.className="linebox linebox-stroke-reverse" }}</script>
</body>
</html>