CSS3을 사용하여 여러 요소를 순서대로 표시하는 방법-CSS 튜토리얼-php.cn

CSS3에서는 키프레임과 결합된 애니메이션을 사용하여 요소에 다양한 애니메이션 효과를 추가합니다. 이번 글에서는 여러 요소의 순차 표시를 구현하는 CSS3의 효과를 주로 소개합니다. 필요한 친구들은 참고하면 됩니다

위 그림에서 볼 수 있듯이 이러한 애니메이션 효과는 HTML5에서 많은 이벤트 프로모션에 자주 사용됩니다. . 특히 연말이 다가옴에 따라 회사의 이벤트 페이지 작업으로 바쁜 학생도 있을 수 있습니다. 이런 소소한 기술을 익히는 것이 도움이 될 수도 있습니다.

CSS3에서는 키프레임과 결합된 애니메이션을 사용하여 요소에 다양한 애니메이션 효과를 추가합니다. 특정 애니메이션은 키프레임에 정의되어 애니메이션에 사용됩니다. 예를 들어 위에서 날아오는 애니메이션 효과를 정의할 수 있습니다.

@keyframes topIn {
  from { transform: translateY(-50px) }
  to { transform: translateY(0px) }
}

로그인 후 복사

및 대상 요소의 애니메이션을 통해 애니메이션을 사용합니다.

<p class="target topIn"></p>
.topIn {
  animation: topIn 1s ease;
}

로그인 후 복사

이러한 방식으로 요소가 DOM에 처음 렌더링되면 위에서 아래로 변위 애니메이션 효과가 발생합니다. 물론, 이 효과는 우리가 원하는 것이 아닙니다. 종종 애니메이션에 0에서 1까지의 투명도 그라데이션을 추가하기도 합니다.

@keyframes topIn {
  from { 
    transform: translateY(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateY(0px);
    opacity: 1; 
  }
}

로그인 후 복사

또한 요소의 표시 타이밍을 제어할 수 있기를 원합니다. 어떻게 해야 할까요? 더 간단한 방법은 애니메이션 효과가 필요할 때만 대상 요소에 애니메이션을 제어하는 클래스 스타일을 추가하는 것입니다.

btn.addEventListener(&#39;click&#39;, function() {
  document.querySelector(&#39;.target&#39;).classList.add(&#39;topIn&#39;);
}, !1);

로그인 후 복사

하지만 여기에는 문제가 있습니다. 나는 그것을 실천한 친구들이 이미 이것을 발견했다고 믿습니다. 우리는 장면에 들어가기 전에 요소가 보이지 않는 상태에 있을 것으로 예상합니다. 하지만 위의 작업만 수행하면 애니메이션이 시작되기 전에 해당 요소를 볼 수 있습니다. 그렇다면 어떻게 해야 할까요?

요소에 display: none 또는 visible: Hidden을 추가하는 것을 쉽게 생각할 수 있습니다. 그러나 display: none 이후에는 요소가 공간을 차지하지 않습니다. 따라서 이 경우 페이지 레이아웃에 혼란이 발생할 수 있습니다. 따라서 시작하기 전에 요소에 새 클래스를 추가합니다.

.aninode {
  visibility: hidden;
}

로그인 후 복사

요소를 표시하려면 새 클래스를 추가하세요.

.animated .aninode {
  visibility: visible;
}

로그인 후 복사

애니메이션 효과를 제어하는 클래스도 CSS에서 약간의 조정이 필요합니다.

.animated .topIn {
  animation: topIn 1s ease;
}

로그인 후 복사

이 방법의 장점은 효과를 얻으려면 클래스에 애니메이션만 추가하면 된다는 것입니다. 예제 데모의 전체 코드는 다음과 같습니다.

<p class="container">
  <p class="target aninode leftIn"></p>
  <button class="btn show">show</button>
  <button class="btn hide">hide</button>
</p>
.container {
  width: 100px;
  margin: 0 auto;
}
.aninode {
  visibility: hidden;
}
.animated .aninode {
  visibility: visible;
}
.target {
  width: 100px;
  height: 100px;
  background: orange;
  border-radius: 4px;
  margin: 20px 0;
}
.animated .topIn {
  animation: topIn 1s ease;
}
.animated .leftIn {
  animation: leftIn 1s ease;
}
.btn {
  width: 100px;
  height: 30px;
  border: 1px solid #ccc;
  outline: none;
  transition: 0.1s;
}
.btn:active {
  border: none;
  background: orange;
  color: #fff;
}
@keyframes topIn {
  from { 
    transform: translateY(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateY(0px);
    opacity: 1; 
  }
}
@keyframes leftIn {
  from { 
    transform: translateX(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateX(0px);
    opacity: 1; 
  }
}
var show = document.querySelector(&#39;.show&#39;);
var hide = document.querySelector(&#39;.hide&#39;);
var container = document.querySelector(&#39;.container&#39;);
show.addEventListener(&#39;click&#39;, function() {
  container.classList.add(&#39;animated&#39;);
}, !1);
hide.addEventListener(&#39;click&#39;, function() {
  container.classList.remove(&#39;animated&#39;);
}, !1);

로그인 후 복사

Demo는 다음과 같이 표시됩니다.

See the Pen <a href=&#39;https://codepen.io/yangbo5207/pen/NXKrPg/&#39;>NXKrPg</a> by Ormie (<a href=&#39;https://codepen.io/yangbo5207&#39;>@yangbo5207</a>) on <a href=&#39;https://codepen.io&#39;>CodePen</a>.

로그인 후 복사

codepen 데모 주소

하지만 이는 우리가 원하는 효과에 조금 부족한 것 같습니다. 계속 생각해보세요. 우선, 다음 요소가 이전 요소보다 늦게 나타나도록 하려면 지연 시간을 설정하는 클래스가 많이 있어야 합니다.

.delay200 {
    animation-delay: 200ms;
    animation-fill-mode: backwards!important;
}
.delay400 {
    animation-delay: 400ms;
    animation-fill-mode: backwards!important;
}
.delay600 {
    animation-delay: 600ms;
    animation-fill-mode: backwards!important;
}
.delay800 {
    animation-delay: 800ms;
    animation-fill-mode: backwards!important;
}

로그인 후 복사

animation-fill-mode: backs!important; 목적은 요소가 나타나기 전에 요소의 투명도를 0으로 유지하는 것입니다. 애니메이션을 추가한 후 요소가 바로 표시되는 것을 방지합니다.

새 클래스에서 애니메이션 약어를 사용할 때 animation-fill-mode 속성을 덮어쓰는 것을 방지하기 위해 !important를 추가했습니다. 여기에 !important를 쓰지 않으면 topIn과 같은 애니메이션 클래스에서 축약형식을 사용할 수 없습니다.

이후에는 위의 코드를 CSS에 추가하고 HTML을 일부 변경하면 원하는 효과를 얻을 수 있습니다.

See the Pen <a href=&#39;https://codepen.io/yangbo5207/pen/mpbEEE/&#39;>mpbEEE</a> by Ormie (<a href=&#39;https://codepen.io/yangbo5207&#39;>@yangbo5207</a>) on <a href=&#39;https://codepen.io&#39;>CodePen</a>.

로그인 후 복사

codepen 데모 주소

전체 코드는 다음과 같습니다.

<p class="container">
  <p class="targets aninode">
      <p class="item leftIn">春晓</p>
      <p class="item leftIn delay200">春眠不觉晓</p>
      <p class="item leftIn delay400">处处蚊子咬</p>
      <p class="item leftIn delay600">夜来风雨声</p>
      <p class="item leftIn delay800"><此处请留下你们的才华></p>
  </p>
  <button class="btn show">show</button>
  <button class="btn hide">hide</button>
</p>
.container {
  width: 200px;
  margin: 0 auto;
}
.aninode {
  visibility: hidden;
}
.animated .aninode {
  visibility: visible;
}
.targets {
  margin: 20px 0;
}
.targets .item {
    border: 1px solid #ccc;
    margin: 10px 0;
    line-height: 2;
    padding: 2px 6px;
    border-radius: 4px;
}
.animated .topIn {
  animation: topIn 1s ease;
}
.animated .leftIn {
  animation-name: leftIn;
  animation-duration: 1s;
}
.btn {
  width: 100px;
  height: 30px;
  border: 1px solid #ccc;
  outline: none;
  transition: 0.1s;
}
.btn:active {
  border: none;
  background: orange;
  color: #fff;
}
@keyframes topIn {
  from { transform: translateY(-50px) }
  to { transform: translateY(0px) }
}
@keyframes leftIn {
  from { 
    transform: translateX(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateX(0px);
    opacity: 1; 
  }
}
.delay200 {
    animation-delay: 200ms;
    animation-fill-mode: backwards!important;
}
.delay400 {
    animation-delay: 400ms;
    animation-fill-mode: backwards!important;
}
.delay600 {
    animation-delay: 600ms;
    animation-fill-mode: backwards!important;
}
.delay800 {
    animation-delay: 800ms;
    animation-fill-mode: backwards!important;
}
var show = document.querySelector(&#39;.show&#39;);
var hide = document.querySelector(&#39;.hide&#39;);
var container = document.querySelector(&#39;.container&#39;);
show.addEventListener(&#39;click&#39;, function() {
  container.classList.add(&#39;animated&#39;);
}, !1);
hide.addEventListener(&#39;click&#39;, function() {
  container.classList.remove(&#39;animated&#39;);
}, !1);

로그인 후 복사

js의 로직은 어떤 식으로든 변경되지 않은 것으로 나타났습니다. 적절한 경우 애니메이션을 추가/제거하기만 하면 됩니다.

이스터 에그:

실제로 우리는 더 골치 아픈 문제에 직면하게 될 것입니다. 수업 작성을 미루는 것입니다. 어떤 시차가 사용될지, 얼마나 많은 요소가 사용될지 알 수 없으므로 모두 손으로 작성하면 작업을 반복하기가 너무 번거롭습니다. 따라서 js를 사용하여 동적으로 삽입할 수 있습니다. 코드는 다음과 같습니다.

const styleSheet = getSheet();
var delay = 100;
while (delay < 10000) {
    styleSheet.insertRule(`.animated .delay${delay}{ animation-delay: ${delay}ms; animation-fill-mode: backwards; }`, styleSheet.cssRules.length);
    delay += delay < 3000 ? 100 : 1000;
}
function getSheet() {
    var sheets = document.styleSheets;
    var len = sheets.length;
    for(var i = 0; i <= len; i++) {
        var sheet = sheets.item(i);
        try {
            if (sheet.cssRules) {
                return sheet;
            }
        } catch(e) {} 
    }
    var style = document.createElement(&#39;style&#39;);
    style.type = "text/css";
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(style);
    return style.sheet;
}

로그인 후 복사

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!