집 > 기사 > 웹 프론트엔드 > HTML5와 CSS3는 스마트 애니메이션의 전환 효과를 실현합니다.

HTML5와 CSS3는 스마트 애니메이션의 전환 효과를 실현합니다.

不言원래의: 2018-06-09 17:17:241972검색

이 기사에서는 스마트한 애니메이션 TAB 전환 효과를 구현하기 위한 HTML5+CSS3 기반 데모를 공유합니다. 매우 훌륭하고 참조할 가치가 있습니다. 필요한 친구는 참조할 수 있습니다.

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

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

HTML5+CSS3 做一个灵动的动画 TAB 切换效果

gif 애니메이션에서 디테일을 보여주기 위해 애니메이션 시간을 3초로 늘렸습니다

구현 아이디어

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

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

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

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

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

HTML code

  <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 중국어 홈페이지를 주목해주세요!

HTML5와 CSS3는 스마트 애니메이션의 전환 효과를 실현합니다.

관련 기사