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

이 기사는 프런트 엔드 버튼에 대한 관련 지식을 제공합니다. 주로 클립 경로를 사용하여 버튼 흐름 테두리 애니메이션을 구현하는 방법에 대해 설명합니다. 관심 있는 친구는 아래를 살펴보는 것이 좋습니다.

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으로 축약할 수 있습니다

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

에서 변경 사항을 달성하기 위해 의사 요소에 애니메이션 효과를 추가합니다.: 클립 경로 CSS 속성은 클리핑을 사용하여 생성합니다. 요소의 표시 가능한 영역입니다. 영역 내의 부품은 표시되고 영역 밖의 부품은 숨겨집니다. inset()은 삽입 사각형을 정의합니다.

구문: ​​

• 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는 애니메이션이 적용 후 즉시 시작되어야 함을 의미합니다.

음수 값을 사용하면 애니메이션이 즉시 시작되지만 루프 중간에 시작됩니다. 예를 들어 애니메이션 지연 시간을 -1초로 지정하면 애니메이션은 즉시 시작되지만 애니메이션 시퀀스가 ​​시작된 지 1초 후에 시작됩니다. 애니메이션 지연에 음수 값을 지정했지만 시작 값이 암시적이면 시작 값은 애니메이션이 요소에 적용된 순간부터 가져옵니다.

• 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>
  

위 내용은 버튼 흐르는 테두리 애니메이션을 구현하기 위한 클립 경로에 대한 자세한 그래픽 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!