마우스를 가져 가면 상자의 경계선 테두리 (테두리 왼쪽, 테두리 상단)

Question

마우스를 가져 가면 특히 경계선 왼쪽과 경계선에 두 개의 경계선을 움직이기를 원합니다. 몇 가지 조사를 한 후에는 실제로 테두리를 "애니메이션"할 수있는 것처럼 보이지 않으므로 호버에서 동일한 효과를 내기 위해 너비를 100 %로 설정해야하는 "선"을 만들어야합니다.

나는 메뉴 항목에 밑줄을 그어서이 작업을 수행하는 방법을 알고 있지만 작성하려고하는이 상자로 작업을 수행하려고합니다. 호버 켜기 (CSS 효과가 이미 작성된 상태로 유지하는 동안)

1) border-left는 왼쪽에서 오른쪽으로 확장 한 후 2) border-top을 맨 위와 오른쪽으로 확장해야합니다.

경계를 왼쪽 또는 경계면으로하고 싶지 않으면 어떤 테두리를 확장할지 선택할 수도 있습니다.

이

CSS :

#txt{ 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    font-size:2vw; 
} 
#box{ 
    position:fixed; 
    top:25%; 
    left:25%; 
    height:20vw; 
    width:20vw; 
    border-right: 2px solid deepskyblue; 
    border-bottom: 2px solid deepskyblue; 
    background-color:black; 
    color:ghostwhite; 
} 
#box:hover{ 
    color:deepskyblue; 
    transition: color 0.25s ease; 
} 
#box:after{ 
    content:""; 
    position:absolute; 
    bottom: 0; 
    left: 0; 
    width:100%; 
    height:100%; 
    transform: scale(0, 0); 
    transform-origin:bottom right; 
    background: ghostwhite; 
    z-index: -1; 
    transition: transform 0.25s ease; 
} 
#box:hover::after{ 
    transform: scale(1, 1); 
    color:deepskyblue; 
} 

HTML :

<div id="box"> 
<span id="txt">TEXT</span> 
</div> 

Answer 1

당신은 큰으로 #txt 요소를 만들 수 있습니다

이 내 상자가 지금까지 (애니메이션 테두리 불행하게도 아무것도) 없다 그런 다음 가상 요소를 사용하여 "테두리"를 만들고 해당 가상 요소의 크기를 애니메이션으로 만듭니다.

transiton-delay을 추가하면 나는 효과가 있다고 생각합니다.

#txt { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
#box { 
 
    font-size: 2vw; 
 
    position: fixed; 
 
    top: 1em; 
 
    left: 40vw; 
 
    height: 20vw; 
 
    width: 20vw; 
 
    background-color: black; 
 
    color: ghostwhite; 
 
} 
 

 
#box:hover { 
 
    color: deepskyblue; 
 
    transition: color 0.25s ease; 
 
} 
 

 
#box:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform: scale(0, 0); 
 
    transform-origin: bottom right; 
 
    background: ghostwhite; 
 
    z-index: -1; 
 
    transition: transform 0.25s ease; 
 
} 
 

 
#box:hover::after { 
 
    transform: scale(1, 1); 
 
    color: deepskyblue; 
 
} 
 

 
#txt::before { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: 2; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 0; 
 
} 
 

 
#txt::before { 
 
    width: 0; 
 
    border-left: 2px solid deepskyblue; 
 
    transition: height .25s .5s ease; 
 
} 
 

 
#txt:hover::before { 
 
    height: 100%; 
 
} 
 

 
#txt::after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 0%; 
 
    top: 0; 
 
    left: 0; 
 
    border-top: 2px solid deepskyblue; 
 
    transition: width 0.25s .75s ease; 
 
} 
 

 
#txt:hover::after { 
 
    width: 100%; 
 
}

<div id="box"> 
 
    <span id="txt">TEXT</span> 
 
</div>