애니메이션 TAB 전환을 구현하는 방법

이번에는 애니메이션 TAB 전환을 구현하는 방법과 애니메이션 TAB 전환을 구현하기 위한 노트가 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

디자이너가 탭 전환 렌더링을 제공했습니다. 비록 작은 기능이지만 프론트엔드 엔지니어들은 이를 구현할 때 주의해야 할 세부 사항이 여전히 많습니다. 귀하의 참고를 위해 데모를 작성했습니다.

최종 효과는 다음과 같습니다.

gif 애니메이션에서 세세한 부분까지 보여드리기 위해 애니메이션 시간을 3초로 늘렸습니다

구현 아이디어

세로선이 수직이 아니기 때문에 간격을 두었습니다. 이므로 테두리를 사용할 수 없습니다. 의사 요소를 사용하겠습니다.

세로 막대는 3개뿐이지만 li는 4개입니다. 이는 간단하며 :not(:first-child) 선택기를 사용하여 선택할 수 있습니다.

작은 것부터 큰 것까지 효과를 주고 싶어서 배경색을 변경합니다. 따라서 배경색을 직접 사용하여 구현할 수는 없습니다.

의사 요소의 크기를 사용하여 제어하면 계산이 더 복잡해지기 때문에 이를 구현하기 위해 box-shadow를 사용하고 싶습니다.

그렇습니다. 다음과 같이 코드 작성을 시작하겠습니다.

HTML 코드

  <p class="m">
    <ul class="tab">
      <li><a href="">导航1</a></li>
      <li><a href="">导航2</a></li>
      <li><a href="">导航3</a></li>
      <li><a href="">导航4</a></li>
    </ul>
  </p>

위의 코드 구조는 이전에 작성한 것이므로 아무 조정도 하지 않겠습니다. 번거로운 코드가 없습니다.

CSS 코드

.m { margin: 100px; }
.tab { width: 400px; margin: 0 auto; border: 1px solid #ddd; height: 40px; text-align: center; line-height: 40px; background: #fff; border-radius: 10px; overflow: hidden; }
.tab li { float: left; width: 100px; position: relative; overflow: hidden; }
.tab li:before, .tab li:after, .tab li a { -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
.tab li:before, .tab li:after { content: ""; display: block; }
.tab li:not(:first-child):after { background: #ddd; height: 20px; width: 1px; left: 0; top: 10px; position: absolute; }
.tab li a { display: block; position: relative; z-index: 2; color: #000; font-size: 14px; }
.tab li:before { width: 0; height: 0; top: 50%; left: 50%; z-index: 1; position: absolute; }
.tab li:hover a { color: #fff; }
.tab li:hover:before { box-shadow: 0 0 0 100px #36bc99; }
.tab li:hover + li:after, .tab li:hover:after { height: 0; top: 20px; }

코드 분석:

애니메이션 구현은 매우 간단합니다. 전환 속성을 사용하면 됩니다.

자신의 의사 요소와 다음 형제 요소의 의사 요소를 제어하려면 + 선택기를 사용하세요.

다른 코드는 비교적 명확하고 간단하므로 직접 분석할 수 있습니다.

이 효과를 얻는 방법은 매우 간단합니다. 매일의 축적과 다양한 매개변수의 유연한 조합에 중점을 둡니다. 구현 방법을 생각하고 최종적으로 코드를 작성하는 것은 매우 빠릅니다. 그리고 거기에는 높은 지식이 없습니다.

CSS가 어려운 이유는 몰라서가 아니라, 어떻게 맞춰야할지 모르기 때문입니다.

실제로는 아직 디자인 효과가 99%만 복원되었습니다. 두 선 중 하나는 배경 안에 있고 다른 하나는 배경 안에 두 개의 구분선을 넣으려면 어떻게 해야 할까요? 그것? 당신은 그것에 대해 생각할 수 있습니다.

Scss의 장점. 위의 CSS가 컴파일되었습니다. 실제로 scss로 구현하는 것이 매우 편리하고 빠르며, 코드의 가독성도 더 좋습니다.

시연은 다음과 같습니다.

.m {
  margin: 100px;
}
.tab {
  width: 400px;margin: 0 auto;border: 1px solid $cdd;height: 40px;text-align: center;line-height: 40px;
  background: $cff;border-radius: 10px;overflow: hidden;
  li {
    float: left;width: 100px;position: relative;overflow: hidden;
    &:before,&:after,a {@include dz();}
    &:before,&:after {
      content: "";display: block;
    }
    &:not(:first-child) {
      &:after {
        background: $cdd;height: 20px;width: 1px;left: 0;top: 10px;position: absolute;
      }
    }
    a {
      display: block;position: relative;z-index: 2;color: $c00;font-size: 14px;
    }
    &:before {
      width: 0;height: 0;top: 50%;left: 50%;z-index: 1;position: absolute;
    }
    &:hover {
      a {color: $cff;}
      &:before {
        box-shadow: 0 0 0 100px $cyan;
      }
      & + li:after,&:after {
        height: 0;top: 20px;
      }
    }
  }
}

물론 이 코드에서는 색상 변수와 믹스인 코드를 사용했습니다. 직접 사용할 수는 없습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

css3의 포인터 이벤트 사용에 대한 자세한 설명

focus-within

사용에 대한 자세한 설명

위 내용은 애니메이션 TAB 전환을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!