CSS3(十九) CSS3 折纸和轮播

CSS3

发布日期: 2020-05-14

更新日期: 2020-05-24

文章字数: 880

阅读时长: 5 分

阅读次数:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>3D图片轮播</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    .wrap {
      width: 400px;
      height: 400px;
      margin: 50px auto;
      position: relative;
      -webkit-transform-style: preserve-3d;
      -webkit-perspective: 1200px;
      border: 1px solid #ccc;
    }
    #left {
      width: 50px;
      height: 50px;
      position: absolute;
      left: -50px;
      top: 150px;
      background: red;
      font: 24px/50px '微软雅黑';
      text-align: center;
    }
    #right {
      width: 50px;
      height: 50px;
      position: absolute;
      right: -50px;
      top: 150px;
      background: red;
      font: 24px/50px '微软雅黑';
      text-align: center;
    }
    .wrap a {
      display: block;
      width: 400px;
      height: 400px;
      position: absolute;
      left: 0px;
      top: 0px;
      -webkit-transform-origin: bottom;
      -webkit-transform: rotateX(180deg);
      opacity: 0;
    }
    .wrap a img {
      width: 100%;
      height: 100%;
    }
    .wrap a.hide {
      -webkit-animation: 2s hide;
      opacity: 0;
      -webkit-transform: rotateX(180deg);
    }
    .wrap a.show {
      -webkit-animation: 2s show;
      opacity: 1;
      -webkit-transform: rotateX(0deg);
    }
    @-webkit-keyframes hide {
      0% {
        -webkit-transform: rotateX(0deg);
        opacity: 1;
      }
      100% {
        -webkit-transform: rotateX(-180deg);
        opacity: 0;
      }
    }
    @-webkit-keyframes show {
      0% {
        -webkit-transform: rotateX(180deg);
        opacity: 0;
      }
      50% {
        -webkit-transform: rotateX(-25deg);
        opacity: 1;
      }
      60% {
        -webkit-transform: rotateX(18deg);
        opacity: 1;
      }
      70% {
        -webkit-transform: rotateX(-12deg);
        opacity: 1;
      }
      80% {
        -webkit-transform: rotateX(8deg);
        opacity: 1;
      }
      90% {
        -webkit-transform: rotateX(-6deg);
        opacity: 1;
      }
      100% {
        -webkit-transform: rotateX(0deg);
        opacity: 1;
      }
    }
  </style>
  <body>
    <div class="wrap">
      <div id="left">上</div>
      <div id="right">下</div>
      <a class="show" href="">![](images/2.jpg)</a>
      <a href="">![](images/1.jpg)</a>
      <a href="">![](images/3.jpg)</a>
      <a href="">![](images/4.jpg)</a>
    </div>
  </body>
  <script>
    var LeftButtn = document.getElementById('left')
    var RightButton = document.getElementById('right')
    var allA = document.getElementsByTagName('a')
    var iNow = 0
    LeftButtn.onclick = function () {
      allA[iNow].className = 'hide'
      --iNow
      if (iNow < 0) {
        iNow = allA.length - 1
      }
      allA[iNow].className = 'show'
    }
    RightButton.onclick = function () {
      allA[iNow].className = 'hide'
      ++iNow
      if (iNow >= allA.length) {
        iNow = 0
      }
      allA[iNow].className = 'show'
    }
  </script>
</html>

折纸效果

折纸比较难想主要是布局他是类似迭代布局
简单来说就是煎饼果子里面需要加果子，葱，面酱等等。但是他们都得在煎饼里面。
所以必须是所有的都在一个 DIV 里面，然后 diV 里面又一个 span 和 div
折纸布局过了就简单了.

代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>3D折纸第三次练习</title>
  </head>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    input {
      position: absolute;
      left: 50%;
      top: 30px;
      margin-left: -50px;
      width: 100px;
      height: 30px;
    }
    .wrap {
      width: 160px;
      height: auto;
      margin: 100px auto;
      position: relative;
      -webkit-transform-style: preserve-3d;
    }
    .wrap h1 {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: white;
      font-size: 16px;
      background: #000000;
      position: relative;
      z-index: 10;
    }
    .wrap div span {
      width: 100%;
      height: 40px;
      background: #000;
      color: white;
      line-height: 40px;
      font-size: 16px;
      text-align: center;
      display: block;
    }
    .wrap div {
      width: 100%;
      height: 40px;
      position: absolute;
      left: 0px;
      top: 42px;
      -webkit-transform-style: preserve-3d;
      -webkit-transform-origin: top;
      -webkit-transform: rotateX(-120deg);
    }
    .wrap div.show {
      -webkit-animation: 1s show;
      -webkit-transform: rotateX(0deg);
    }
    .wrap div.hide {
      -webkit-animation: 1s hide;
      -webkit-transform: rotateX(-120deg);
    }
    @-webkit-keyframes show {
      0% {
        -webkit-transform: rotateX(-120deg);
      }
      25% {
        -webkit-transform: rotateX(30deg);
      }
      50% {
        -webkit-transform: rotateX(-15deg);
      }
      75% {
        -webkit-transform: rotateX(-8deg);
      }
      85% {
        -webkit-transform: rotateX(8deg);
      }
      90% {
        -webkit-transform: rotateX(-4deg);
      }
      100% {
        -webkit-transform: rotateX(0deg);
      }
    }
    @-webkit-keyframes hide {
      0% {
        -webkit-transform: rotateX(0deg);
      }
      100% {
        -webkit-transform: rotateX(-120deg);
      }
    }
  </style>
  <body>
    <input type="button" value="展开" id="btn" />
    <div class="wrap" id="wrap">
      <h1>3D折纸标题</h1>
      <div>
        <span>第一个标题</span>
        <div>
          <span>第二个标题</span>
          <div>
            <span>第三个标题</span>
            <div>
              <span>第四个标题</span>
              <div>
                <span>第五个标题</span>
                <div>
                  <span>第六个标题</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    var btn = document.getElementById('btn')
    var wrap = document.getElementById('wrap')
    var flag = true
    var index = 0
    var timer = null
    btn.onclick = function () {
      //开始前清空定时器
      clearInterval(timer)
      if (flag) {
        timer = setInterval(function () {
          wrap.getElementsByTagName('div')[index].className = 'show'
          ++index
          if (index == wrap.getElementsByTagName('div').length) {
            clearInterval(timer)
            flag = false
            btn.value = '收缩'
          }
        }, 100)
      } else {
        timer = setInterval(function () {
          --index
          wrap.getElementsByTagName('div')[index].className = 'hide'
          if (index == 0) {
            clearInterval(timer)
            flag = true
            btn.value = '展开'
          }
        }, 100)
      }
    }
  </script>
</html>