鼠标悬停效果

css鼠标悬停效果：
html代码：

  <div class="container">
      <div class="box">
        <h1>01</h1>
        <h2>web Learn</h2>
        <p>he shortest way to do many things is to only one thing at a time.</p>
        <a href="#">Read More</a>
      </div>
      <div class="box">
        <h1>02</h1>
        <h2>web Learn</h2>
        <p>Difficult circumstances serve as a textbook of life for people.</p>
        <a href="#">Read More</a>
      </div>
      <div class="box">
        <h1>03</h1>
        <h2>web Learn</h2>
        <p>A man’s best friends are his ten fingers.</p>
        <a href="#">Read More</a>
      </div>
      <div class="box">
        <h1>04</h1>
        <h2>web Learn</h2>
        <p>f you want something you’ve never had, then you’ve got to do something you’ve never Done.</p>
        <a href="#">Read More</a>
      </div>
  </div>

css部分：

    *{
      margin:0;
      padding:0;
    }
    body{
      background: #060c21;
      box-sizing: border-box;
      padding:0 20px;
    }
    .container{
      width: 100%;
      height: 400px;
      display: flex;
      justify-content: center;
      margin-top:100px ;
    }
    .container .box{
      width: 20%;
      height: 100%;
      color: #ffffff;
      position: relative;
      background: #060c21;
      margin-left: 2%;
    }
    .container .box::before{
      content: "";
      position: absolute;
      top:-2px;
      bottom:-2px;
      left:-2px;
      right:-2px;
      z-index: -1;
      transform: skew(2deg,2deg);
    }
    .container .box::after{
      content: "";
      position: absolute;
      top:-1px;
      bottom:-1px;
      left:-1px;
      right:-1px;
      z-index: -2;
      /* 旋转x轴 2度 Y轴 2度 */
      transform: skew(2deg,2deg); 
      /* 滤镜 高斯模糊值设置 */
      filter: blur(3px);  
      opacity: 0;
    }
    .conrainer .box:hover::after{
    opacity: 1;
} 
/*   */
.container .box:nth-child(1)::before , .container .box:nth-child(1)::after{
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    }
    .container .box:nth-child(2)::before , .container .box:nth-child(2)::after{
  background-image: linear-gradient(to top, #e2fbc2 0%, #04f52c 100%);
    }
    .container .box:nth-child(3)::before , .container .box:nth-child(3)::after{
  background-image: linear-gradient(to top, #fcf3c5 0%, #dbf308 100%);
    }
    .container .box:nth-child(4)::before , .container .box:nth-child(4)::after{
  background-image: linear-gradient(to top, #ebc2fb 0%, #c708f7 100%);
    }
    .container .box h1{
      width: 100%;
      height: 100%;
      font-size: 120px;
      position: absolute;
      top:50px;
      text-align: center;
      color: rgba(129, 129, 129, 0.493);
      transition: 0.5s;
      z-index: 0;
    }
    .container .box h1:hover{
      top:20px;
    }
    .container .box h2{
      width: 100%;
      height: 100px;
      line-height: 120px;
      box-sizing: border-box;
      padding-left: 10px;
      font-size: 30px;
      z-index: 2;
    }
    .container .box p{
      width: 100%;
      height: 170px;
      box-sizing: border-box;
      line-height: 26px;
      text-indent: 2rem;
      box-sizing: border-box;
      padding:0 8px;
      z-index: 3;
    }
   .container .box a{
     width: 120px;
     height: 40px;
     display: block;
     border:1px solid #ccc;
     border-radius: 5px;
    text-decoration: none;
    color: #ffffff;
    line-height: 40px;
    text-align: center;
    opacity: 0;
    position: absolute;
     bottom: 80px;
     left: 20px;
   }
   .container .box:hover a{
    opacity: 1;
   }
   .container .box:hover a::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    z-index: -1;
    transform: scaleY(0);
    transition:transform 0.5s;
    transform-origin: bottom;

   }
   .container .box a:hover::before,
.container .box a:hover
{
    transform: scaleY(1);
    transition:transform 0.5s;
    transform-origin: top;
    color: black;
    background: #fff;
}

效果部分

大家也可以来这里具体查看效果
https://mp.weixin.qq.com/s/iY9Mgtp0c4vIrxj-zo3krQ
或者大家可以关注我的公众号 奔走的犀牛 有问题可以一起来讨论