溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css如何制作全屏幻燈片切換動畫

發(fā)布時間：2022-02-28 09:51:41 來源：億速云 閱讀：181 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了css如何制作全屏幻燈片切換動畫，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

<!DOCTYPE html>

<html >

<head>

  <meta charset="UTF-8">

 

  <title>全屏幻燈片切換動畫</title>

         <meta name="keywords" content="全屏幻燈片切換動畫" />

         <meta name="description" content="全屏幻燈片切換動畫" />

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

 

 

 

      <link rel="stylesheet" href="css/style.css">

 

 

</head>

 

<body>

  <div class="slider-container">

  <div class="slider-control left inactive"></div>

  <div class="slider-control right"></div>

  <ul class="slider-pagi"></ul>

  <div class="slider">

    <div class="slide slide-0 active">

      <div class="slide__bg"></div>

      <div class="slide__content">

        <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">

          <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />

        </svg>

        <div class="slide__text">

          <h3 class="slide__text-heading">Project name 1</h3>

          <p class="slide__text-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia.</p>

          <a class="slide__text-link">Project link</a>

        </div>

      </div>

    </div>

    <div class="slide slide-1 ">

      <div class="slide__bg"></div>

      <div class="slide__content">

        <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">

          <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />

        </svg>

        <div class="slide__text">

          <h3 class="slide__text-heading">Project name 2</h3>

          <p class="slide__text-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia.</p>

          <a class="slide__text-link">Project link</a>

        </div>

      </div>

    </div>

    <div class="slide slide-2">

      <div class="slide__bg"></div>

      <div class="slide__content">

        <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">

          <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />

        </svg>

        <div class="slide__text">

          <h3 class="slide__text-heading">Project name 3</h3>

          <p class="slide__text-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia.</p>

          <a class="slide__text-link">Project link</a>

        </div>

      </div>

    </div>

    <div class="slide slide-3">

      <div class="slide__bg"></div>

      <div class="slide__content">

        <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">

          <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />

        </svg>

        <div class="slide__text">

          <h3 class="slide__text-heading">Project name 4</h3>

          <p class="slide__text-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia.</p>

          <a class="slide__text-link">Project link</a>

        </div>

      </div>

    </div>

  </div>

</div>

  <script src='http://www.5iweb.com.cn/statics/js/jquery.1.7.1.min.js'></script>

 

    <script src="js/index.js"></script>

 

</body>

</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css如何制作全屏幻燈片切換動畫”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手