console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2d模板</title>
</head>
<style>
  *{margin:0;padding:0;}
  
  li{list-style:none;}
  .csdh{width:20px;height:200px;border:1px solid #000;margin-left:200px;}
  .csdh ul{
    width: 20px;
    height: 200px;
    position: relative;
    /* background: #000; */
  }
  .csdh ul li{
    width: 20px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    transition: 5s;
    transform-origin: bottom;
    background: black;
  }
  div:hover ul li.li1{background:#f00;transform:rotate(30deg);}
  div:hover ul li.li2{background:#f80;transform:rotate(60deg);}
  div:hover ul li.li3{background:#ff0;transform:rotate(90deg);}
  div:hover ul li.li4{background:#0f0;transform:rotate(120deg);}
  div:hover ul li.li5{background:#0ff;transform:rotate(150deg);}
  div:hover ul li.li6{background:#00f;transform:rotate(180deg);}
  div:hover ul li.li7{background:#f0f;transform:rotate(210deg);}
  .wb{width:100vw;height:100px;position: relative;}
  .box{width:100px;height:100px;background:#f00;position:absolute;
  transition:3s;left:0;}
  .zi{width:30px;height:30px;background:#0f0;

  }

  .wb:hover .box{left:500px;}

  .box1{width:500px;height:100px;border:1px solid #000;overflow:hidden;}
  .box1 h3{font:50px/2 "";text-align:center;transform:skewX(-60deg);transition:.5s;}
  .box1:hover h3{transform:skewX(0);}

  .box2{width:300px;height:200px;border:1px solid #000;position:relative;overflow:hidden;}
  .box2 img{width:300px;height:200px;display:block;}
  .box2 p{width:300px;height:200px;background:rgba(0,0,0,.5);
  transform:translateY(-100%);position:absolute;top:0;
  }
  .box2 span{position:absolute;top:0;width:100%;text-align:center;font:50px/4 "";color:#fff;transform:scale(0);transition:.5s;}
  .box2:hover p{transform:translateY(0);transition:.5s;}
  .box2:hover span{transform:scale(1);transition:.5s .5s;}

  .box3{width:300px;height:200px;border:1px solid #000;position:relative;overflow:hidden;}
  .box3 img{width:300px;height:200px;}
  .box3 p{background:rgba(0,0,0,.5);color:#fff;text-align:center;font:16px/2 "";position:absolute;left:0;right:0;bottom:-32px;transition:.5s;}
  .box3:hover p{bottom:0;}
</style>
</style>
<body>
  <div style="width: 200px;height: 20px;background-image: linear-gradient(45deg, blue, red);">
    渐变色
  </div>
  <div style="width: 200px;height: 20px;background-image: radial-gradient(ellipse, blue, red);">
    椭圆
  </div>
  <div >
    彩色的黑
  </div>
  <div class="csdh">
    <ul>
      <li class="li1"></li>
      <li class="li2"></li>
      <li class="li3"></li>
      <li class="li4"></li>
      <li class="li5"></li>
      <li class="li6"></li>
      <li class="li7"></li>
    </ul>
  </div>
  <div >
    动画过渡测试(移动)
  </div>
  <div class="wb">
    <div class="box">
      <div class="zi"></div>
    </div>
  </div>
  <div >
    倾斜
  </div>
  <div class="box1">
    <h3>倾斜</h3>
  </div>
  <div >
    重叠框
  </div>
  <div class="box2">
    <img src="http://img0.bdstatic.com/img/image/wise/1%E6%B8%85%E7%BA%AF%E7%BE%8E%E5%A5%B3.jpg" />
      <p></p>
      <span>蓉蓉</span>
  </div>
  <div >
    综合
  </div>
  <div class="box3">
    <img src="http://img0.bdstatic.com/img/image/wise/1%E6%B8%85%E7%BA%AF%E7%BE%8E%E5%A5%B3.jpg" />
      <p>从下至上</p>
  </div>
</body>
</html>