Heim > Artikel > Web-Frontend > So erstellen Sie einen Folienwechsel-Animationseffekt in CSS3

So erstellen Sie einen Folienwechsel-Animationseffekt in CSS3

php中世界最好的语言Original: 2017-11-24 13:45:352862Durchsuche

Dieses Mal werde ich Ihnen beibringen, wie Sie mit CSS3 einen Folienwechsel-Animationseffekt erstellen. Der Folienwechsel-Animationseffekt kann in vielen Situationen verwendet werden. Es gibt so viele Beispiele für Fälle zum Wechseln von Animationseffekten

<!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>

Es gibt so viele Fälle für den Wechsel von Animationseffekten in Folien. Ich glaube, dass jeder daraus lernen wird, nachdem er es gelesen hat. Weitere spannende Inhalte finden Sie hier Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

So erzeugen Sie den Effekt des Schließens und Öffnens der Tür in CSS3

So verwenden Sie CSS3-Animationseigenschaften

So verwenden Sie CSS3 Box-Shadow

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Folienwechsel-Animationseffekt in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erstellen Sie mit CSS3 adaptive Vollbild-Fokusbildwechsel-SpezialeffekteNächster Artikel：So erstellen Sie mit CSS3 adaptive Vollbild-Fokusbildwechsel-Spezialeffekte

In Verbindung stehende Artikel

Mehr sehen