全屏幻灯片切换动画制作

2019-09-13 郑州网站建设  

<!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=http://www.divcss5.com/css3-style/"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">

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

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

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

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

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


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