버튼 흐르는 테두리 애니메이션을 구현하기 위한 클립 경로에 대한 자세한 그래픽 설명

1은 효과를 구현합니다. 구분을 쉽게 하기 위해 before와 after를 설정합니다. 의사 요소의 테두리 색상이 다릅니다

<div>苏苏_icon</div>

로그인 후 복사

의사 요소의 위치 지정 위치 수정

• div {
    position: relative;
    width: 220px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    background: #55557f;
    cursor: pointer;
    border-radius: 10px;
  }

  로그인 후 복사

inset 속성: left/right/bottom/top
• 을 설정하는 데 사용됩니다.

div::after,
div::before {
   content: "";
   position: absolute;
   width: 240px;
   height: 84px;
   border: 2px solid #55557f;
   border-radius: 10px;
 }
div::before{
 border: 2px solid orange;
}

로그인 후 복사

clip-path

clip-path

구문: ​​

div::after,
div::before{
 + left: calc(110px - 120px);
 + top: calc(32px - 42px);
}

로그인 후 복사

설명:

4개의 매개변수가 모두 제공되는 경우:
이들은 참조 상자에서 안쪽으로 위쪽, 오른쪽, 아래쪽 및 왼쪽 오프셋을 나타냅니다. 오프셋은 오프셋이 위치를 정의합니다. 직사각형의 모서리가 삽입됩니다. 이러한 매개변수는 여백 단축 구문을 따르므로 4개의 그림 모두에 대해 1개, 2개 또는 4개의 값을 설정할 수 있습니다.

선택적 border-radiu 매개변수:

border-radius 단축 구문을 사용하여 삽입 직사각형의 둥근 모서리를 정의하세요

• 의사 요소에 삽입 설정을 시도해 보세요

div::after,
div::before{
 - left: calc(110px - 120px);
 - top: calc(32px - 42px);
 - inset: -10px;
}

로그인 후 복사

clip-path: inset(20px 50px 10px 0 round 50px);

div::after,
div::before{
  + clip-path: inset(0 0 98% 0);
}

로그인 후 복사

div::after,
div::before{
  + clip-path: inset(0 98% 0 0);
}

애니메이션 추가

div::after,
div::before{
  + clip-path: inset( 98% 0  0 0);
}

div::after,
div::before{
 + clip-path: inset(0  0 0  98% ) ;
}

포스트 의사 요소에 애니메이션 지연을 추가하여 시차 효과 만들기

animation- 지연

CSS 속성은 다음을 지정합니다. 요소가 애니메이션을 시작하기 전에 기다려야 하는 시간입니다. 애니메이션은 나중에 시작할 수도 있고 처음부터 즉시 시작할 수도 있고 애니메이션 중간에 즉시 시작할 수도 있습니다.

양수 값은 지정된 시간이 경과한 후에 애니메이션이 시작되어야 함을 나타냅니다. 기본값 0s는 애니메이션이 적용 후 즉시 시작되어야 함을 의미합니다.

• div::after,
  div::before{
    + animation: pathRotate 3s infinite linear;
  }

  로그인 후 복사
  
전면 의사 요소의 테두리 색상 값 설정을 제거하세요

@keyframes pathRotate {  0%,  100% {
    clip-path: inset(0 0 98% 0);
  }  25% {
    clip-path: inset(0 98% 0 0);
  }  50% {
    clip-path: inset(98% 0 0 0);
  }  75% {
    clip-path: inset(0 0 0 98%);
  }
}

로그인 후 복사

div에 호버 이벤트를 추가하면 끝~

div:hover {
  filter: brightness(1.5);
}

로그인 후 복사

div{	/* 添加过渡效果 */
	transition: all 0.5s;
}

로그인 후 복사

3.实现代码

  
    
    
  

  
  
  
    <div>苏苏_icon</div>
  

로그인 후 복사