css3图片封面展示动画

2019-09-13 郑州网站建设  

<!DOCTYPE html>

<html >

<head>

  <meta charset="UTF-8">

  <title>css3图片封面展示动画</title>

      <link rel="stylesheet" href=http://www.divcss5.com/css3-style/"css/style.css">

 

 

</head>

 

<body>

  <div class="cont s--inactive">

  <!-- cont inner start -->

  <div class="cont__inner">

    <!-- el start -->

    <div class="el">

      <div class="el__overflow">

        <div class="el__inner">

          <div class="el__bg"></div>

          <div class="el__preview-cont">

            <h2 class="el__heading">Section 1</h2>

          </div>

          <div class="el__content">

            <div class="el__text">Whatever</div>

            <div class="el__close-btn"></div>

          </div>

        </div>

      </div>

      <div class="el__index">

        <div class="el__index-back">1</div>

        <div class="el__index-front">

          <div class="el__index-overlay" data-index="1">1</div>

        </div>

      </div>

    </div>

    <!-- el end -->

    <!-- el start -->

    <div class="el">

      <div class="el__overflow">

        <div class="el__inner">

          <div class="el__bg"></div>

          <div class="el__preview-cont">

            <h2 class="el__heading">Section 2</h2>

          </div>

          <div class="el__content">

            <div class="el__text">Whatever</div>

            <div class="el__close-btn"></div>

          </div>

        </div>

      </div>

      <div class="el__index">

        <div class="el__index-back">2</div>

        <div class="el__index-front">

          <div class="el__index-overlay" data-index="2">2</div>

        </div>

      </div>

    </div>

    <!-- el end -->

    <!-- el start -->

    <div class="el">

      <div class="el__overflow">

        <div class="el__inner">

          <div class="el__bg"></div>

          <div class="el__preview-cont">

            <h2 class="el__heading">Section 3</h2>

          </div>

          <div class="el__content">

            <div class="el__text">Whatever</div>

            <div class="el__close-btn"></div>

          </div>

        </div>

      </div>

      <div class="el__index">

        <div class="el__index-back">3</div>

        <div class="el__index-front">

          <div class="el__index-overlay" data-index="3">3</div>

        </div>

      </div>

    </div>

    <!-- el end -->

    <!-- el start -->

    <div class="el">

      <div class="el__overflow">

        <div class="el__inner">

          <div class="el__bg"></div>

          <div class="el__preview-cont">

            <h2 class="el__heading">Section 4</h2>

          </div>

          <div class="el__content">

            <div class="el__text">Whatever</div>

            <div class="el__close-btn"></div>

          </div>

        </div>

      </div>

      <div class="el__index">

        <div class="el__index-back">4</div>

        <div class="el__index-front">

          <div class="el__index-overlay" data-index="4">4</div>

        </div>

      </div>

    </div>

    <!-- el end -->

    <!-- el start -->

    <div class="el">

      <div class="el__overflow">

        <div class="el__inner">

          <div class="el__bg"></div>

          <div class="el__preview-cont">

            <h2 class="el__heading">Section 5</h2>

          </div>

          <div class="el__content">

            <div class="el__text">Whatever</div>

            <div class="el__close-btn"></div>

          </div>

        </div>

      </div>

      <div class="el__index">

        <div class="el__index-back">5</div>

        <div class="el__index-front">

          <div class="el__index-overlay" data-index="5">5</div>

        </div>

      </div>

    </div>

    <!-- el end -->

  </div>

  <!-- cont inner end -->

</div>

 

 

    <script src=http://www.divcss5.com/css3-style/"js/index.js"></script>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2173.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • head
  • Doctype
  • !
  • CSS3