全屏幻灯片切换动画可拖拽

2019-09-13 郑州网站建设  

<!DOCTYPE html>

<html >

<head>

  <meta charset="UTF-8">

 

  <title>全屏幻灯片切换动画可拖拽</title>

         <meta name="keywords" content="canvas动画, 手机微信网站特效, css3动画, html5特效, 网页特效" />

         <meta name="description" content="网页特效库-专注于HTML5CSS3jsjQuery、手机手机端等网页特效的手机与分享。所有的资源都免费提供广大童鞋download学习和使用。" />

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


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