CSS: 멋진 테두리 애니메이션을 만드는 방법

Hello World! 시리즈의 새로운 에피소드 - 5분 안에 CSS/JS 트릭.
나는 그랬고 나는 후속 조치를 취하고 싶었다. 이제 더 매력적이고 고급스러운 테두리 애니메이션을 만드는 방법을 설명하겠습니다.

컨테이너의 스타일을 과도하게 지정할 필요는 없습니다. 패딩, 테두리, 원하는 경우 테두리 반경만 지정하면 됩니다(권장). div에 필요한 모든 것을 삽입한 후(또는 버튼 역할을 하도록) 다음과 같이 할 수 있습니다.

#container {
  border-radius: 10px;
  padding: 35px;
  width: 380px;
  overflow: hidden;
  padding: 2rem;
  animation: borderSpin 5s ease infinite;

컨테이너 스타일 내부에 :after 및 :before를 추가합니다.

 &::before {
    content: "";
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: rotate 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}

많은 것들이 있습니다. 컨테이너에 다채로운 배경을 제공하고 애니메이션을 사용하여 테두리를 움직이게 합니다. 배경 크기, 위치, 색상, 계산, 반경 등을 가지고 놀 수 있습니다.


실제로 애니메이션 부분은 매우 쉽습니다.

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

우리는 단지 배경을 회전하고 있습니다.


나는 당신을 위해 8개의 애니메이션 예제를 만들었습니다(완벽한 경험을 위해 링크를 여십시오).

Live preview: - 빠른 애니메이션 부분 확인



도움이 되었기를 바라며 읽어주셔서 감사합니다!

Please smash that like button to make me understand that you want the series to continue :)

내 뉴스레터를 구독하세요!

재미있고 유익한 주간 요약
내 기사의 무료 PDF 버전
고도로 사용자 정의 가능한 받은 편지함
그것은 --> 무료입니다 <-- 그리고 당신은 나를 도와줍니다!