테두리 애니메이션 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

당신은 당신이 필요로 나머지 상자를 위해이 값을 조정할 수 있어야한다.