简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  css3는 시퀀스_css3_CSS_웹페이지 제작에서 여러 요소를 표시하는 효과를 실현합니다.

css3는 시퀀스_css3_CSS_웹페이지 제작에서 여러 요소를 표시하는 효과를 실현합니다.

韦小宝
韦小宝원래의
2017-12-16 10:25:433698검색

CSS3에서는 키프레임과 결합된 애니메이션을 사용하여 요소에 다양한 애니메이션 효과를 추가합니다. 이번 글에서는 주로 여러 요소를 순차적으로 표시하는 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);


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

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


.aninode {
  visibility: hidden;
}


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


.animated .aninode {
  visibility: visible;
}


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


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


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


<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;
}


Summary

위는 여러 요소를 순차적으로 표시하는 효과를 얻기 위해 편집기에서 도입한 CSS3입니다. 모든 분들께 도움이 되기를 바랍니다. ! !

관련 추천:

CSS3에서 레이아웃에 창 단위를 사용하는 방법

CSS3 점차적으로 빛나는 사각형 테두리의 예

순수한 CSS3 효과 리소스 수집 및 구성

위 내용은 css3는 시퀀스_css3_CSS_웹페이지 제작에서 여러 요소를 표시하는 효과를 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：canvas_html5 튜토리얼 기술로 시계를 그리는 방법다음 기사：canvas_html5 튜토리얼 기술로 시계를 그리는 방법

관련 기사

더보기