집 > 기사 > 웹 프론트엔드 > CSS3에서 슬라이드 전환 애니메이션 효과를 만드는 방법

CSS3에서 슬라이드 전환 애니메이션 효과를 만드는 방법

php中世界最好的语言원래의: 2017-11-24 13:45:352862검색

이번에는 CSS3를 사용하여 슬라이드 전환 애니메이션 효과를 만드는 방법을 가르쳐 드리겠습니다. 슬라이드 전환 애니메이션 효과는 다양한 상황에서 사용할 수 있습니다. 오늘은 슬라이드 전환 애니메이션 효과

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>html5 幻灯片切换动画</title>
 
      <link rel="stylesheet" href="css/style.css">
 
 
</head>
 
<body>
 
<div>
  <!-- slider start -->
  <div class="fnc-slider example-slider">
    <div>
      <!-- slide start -->
      <div class="fnc-slide m--blend-green m--active-slide">
        <div>
          <div>
            <div></div>
          </div>
          <div>
            <h2>
              <div>
                <span>Black</span>
              </div>
              <div>
                <span>Widow</span>
              </div>
            </h2>
            <button type="button">
              Credits
              <span data-text="Credits">Credits</span>
            </button>
          </div>
        </div>
      </div>
      <!-- slide end -->
      <!-- slide start -->
      <div class="fnc-slide m--blend-dark">
        <div>
          <div>
            <div></div>
          </div>
          <div>
            <h2>
              <div>
                <span>Captain</span>
              </div>
              <div>
                <span>America</span>
              </div>
            </h2>
            <button type="button">
              Credits
              <span data-text="Credits">Credits</span>
            </button>
          </div>
        </div>
      </div>
      <!-- slide end -->
      <!-- slide start -->
      <div class="fnc-slide m--blend-red">
        <div>
          <div>
            <div></div>
          </div>
          <div>
            <h2>
              <div>
                <span>Iron</span>
              </div>
              <div>
                <span>Man</span>
              </div>
            </h2>
            <button type="button">
              Credits
              <span data-text="Credits">Credits</span>
            </button>
          </div>
        </div>
      </div>
      <!-- slide end -->
      <!-- slide start -->
      <div class="fnc-slide m--blend-blue">
        <div>
          <div>
            <div></div>
          </div>
          <div>
            <h2>
              <div>
                <span>Thor</span>
              </div>
              <div>
                <span>Just Thor</span>
              </div>
            </h2>
            <button type="button">
              Credits
              <span data-text="Credits">Credits</span>
            </button>
          </div>
        </div>
      </div>
      <!-- slide end -->
    </div>
    <nav>
      <div>
        <div class="fnc-navbg m--navbg-green m--active-nav-bg"></div>
        <div class="fnc-navbg m--navbg-dark"></div>
        <div class="fnc-navbg m--navbg-red"></div>
        <div class="fnc-navbg m--navbg-blue"></div>
      </div>
      <div>
        <button>
          Black Widow
          <span></span>
        </button>
        <button>
          Captain America
          <span></span>
        </button>
        <button>
          Iron Man
          <span></span>
        </button>
        <button>
          Thor
          <span></span>
        </button>
      </div>
    </nav>
  </div>
  <!-- slider end -->
  <div>
    <div></div>
    <h2>Made by</h2>
    <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/142996/profile/profile-512_5.jpg" alt="" />
    <h3>Nikolay Talanov</h3>
    <a href="http://codepen.io/suez/" target="_blank">My codepen</a>
    <a href="https://twitter.com/NikolayTalanov" target="_blank">My twitter</a>
    <h2>Based on</h2>
    <a href="https://dribbble.com/shots/2375246-Fashion-Butique-slider-animation" target="_blank">Concept by Kreativa Studio</a>
    <h4>Global Blend Mode</h4>
    <div>
      <input type="checkbox" class="colorful-switchcheckbox js-activate-global-blending" id="colorful-switch-cb" />
      <label for="colorful-switch-cb">
        <span></span>
        <span></span>
        <span>
          <span></span>
        </span>
        <span></span>
      </label>
    </div>
  </div>
</div>
 
    <script src="js/index.js"></script>
 
</body>
</html>

에 대해 설명하겠습니다.

슬라이드 전환 애니메이션 효과에 대한 사례가 너무 많습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트에서 다른 관련 기사를 주목해 보세요.