边框动画CSS

Question

我面临一些问题，我似乎无法弄清楚。我正在寻找的最终结果是，当盒子被徘徊时，边框应该有动画形成一个看起来像这样的框架。 - 附图

但我得到的实际结果是不同的。边界不构成完美的框架。这是我的代码。

<section class="services"> 

      <div class="grid"> 
       <div class="box"> 
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
         <line class="top" x1="0" y1="0" x2="900" y2="0"></line> 
         <line class="left" x1="0" y1="260" x2="0" y2="-520"></line> 
         <line class="bottom" x1="300" y1="260" x2="-600" y2="260"></line> 
         <line class="right" x1="300" y1="0" x2="300" y2="780"></line> 
        </svg> 
        <div class="icon-wrapper"><i class="fa fa-users custom-icon"><span class="fix-editor">&nbsp;</span></i></div> 

     <p>text</p> 
       </div> 
       <div class="box"> 
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
         <line class="top" x1="0" y1="0" x2="900" y2="0"></line> 
         <line class="left" x1="0" y1="460" x2="0" y2="-920"></line> 
         <line class="bottom" x1="300" y1="460" x2="-600" y2="460"></line> 
         <line class="right" x1="300" y1="0" x2="300" y2="1380"></line> 
        </svg> 
        <h3>text</h3> 

       </div> 
       <div class="box"> 
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
         <line class="top" x1="0" y1="0" x2="900" y2="0"></line> 
         <line class="left" x1="0" y1="460" x2="0" y2="-920"></line> 
         <line class="bottom" x1="300" y1="460" x2="-600" y2="460"></line> 
         <line class="right" x1="300" y1="0" x2="300" y2="1380"></line> 
        </svg> 
        <h3>text</h3> 

       </div> 
      </div><!-- /grid --> 
</section> 

这是CSS

html {background:blue;} 
.box { 
width: 300px; 
height:260px; 
position: relative; 
background: rgba(255,255,255,1); 
display: inline-block; 
margin: 0 10px; 
cursor: pointer; 
color: #2c3e50; 
box-shadow: inset 0 0 0 3px #2c3e50; 
-webkit-transition: background 0.4s 0.5s; 
transition: background 0.4s 0.5s; 
} 

.box:hover { 
background: rgba(255,255,255,0); 
-webkit-transition-delay: 0s; 
transition-delay: 0s; 
} 


.box svg { 
position: absolute; 
top: 0; 
left: 0; 
} 

.box svg line { 
stroke-width: 3; 
stroke: #ecf0f1; 
fill: none; 
-webkit-transition: all .8s ease-in-out; 
transition: all .8s ease-in-out; 
} 

.box:hover svg line { 
-webkit-transition-delay: 0.1s; 
transition-delay: 0.1s; 
} 

.box svg line.top, 
.box svg line.bottom { 
stroke-dasharray: 330 240; 
} 

.box svg line.left, 
.box svg line.right { 
stroke-dasharray: 490 400; 
} 

.box:hover svg line.top { 
-webkit-transform: translateX(-600px); 
transform: translateX(-600px); 
} 

.box:hover svg line.bottom { 
-webkit-transform: translateX(600px); 
transform: translateX(600px); 
} 

.box:hover svg line.left { 
-webkit-transform: translateY(520px); 
transform: translateY(520px); 
} 

.box:hover svg line.right { 
-webkit-transform: translateY(-520px); 
transform: translateY(-520px); 
} 

.services {text-align: center;} 
/* Frame */ 
.services .box { 
background: rgba(0,0,0,0); 
color: #fff; 
box-shadow: none; 
-webkit-transition: background 0.3s; 
transition: background 0.3s; 
} 

.services .box:hover { 
background: rgba(0,0,0,0.4); 
} 



.services .box svg line { 
-webkit-transition: all .5s; 
transition: all .5s; 
} 

.services .box:hover svg line { 
stroke-width: 10; 
-webkit-transition-delay: 0s; 
transition-delay: 0s; 
} 

.services .box:hover svg line.top { 
-webkit-transform: translateX(-300px); 
transform: translateX(-300px); 
} 

.services .box:hover svg line.bottom { 
-webkit-transform: translateX(300px); 
transform: translateX(300px); 
} 

.services .box:hover svg line.left { 
-webkit-transform: translateY(260px); 
transform: translateY(260px); 
} 

.services .box:hover svg line.right { 
-webkit-transform: translateY(-260px); 
transform: translateY(-260px); 
} 

这是一个fiddle

Answer 1

你值这个：

.box svg line.left, 
.box svg line.right { 
    stroke-dasharray: 
} 

是导致错误的第一箱。不妨用以下数字：

.box svg line.left, 
.box svg line.right { 
    stroke-dasharray: 290 200; 
} 

Fiddle

您应该能够根据您的需要来调整这些值，其余的框。