console 命令行工具 X clear

console

<body>
  <div class="container">
      <div class="card">
          <span class="card-title">肖申克的救赎</span>
           <span class="card-description">希望让人自由。</span>
        <img src="https://jf-temp-1301446188.cos.ap-guangzhou.myqcloud.com/logo" alt="" />
         
      </div>
      <div class="card">
          <span class="card-title">霸王别姬</span>
         <span class="card-description">风华绝代。</span>
        <img src="https://jf-temp-1301446188.cos.ap-guangzhou.myqcloud.com/logo2" alt="" />
        
      </div>
    <div class="card">
          <span class="card-title">阿甘正传</span>
      <span class="card-description">一部美国近现代史。</span>
      <img src="https://jf-temp-1301446188.cos.ap-guangzhou.myqcloud.com/logo1" alt="" />
      
      </div>
    <div class="card">
          <span class="card-title">这个杀手不太冷</span>
      <span class="card-description">怪蜀黍和小萝莉不得不说的故事。</span>
      <img src="https://jf-temp-1301446188.cos.ap-guangzhou.myqcloud.com/logo" alt="" />
  
      </div>
  </div>
</body>

body{
  background-color:#100e17;
  color: white;
  font-family: 'Zhi Mang Xing', cursive;
}
.container{
  position:relative;
  top: 60px;
  display:flex;
}
.card{
  position:relative;
  width:200px;
  height:280px;
  border-radius: 10px;
   background-color: #17141d;
  box-shadow: -1rem 0 3rem #000;
  transition: 0.4s ease-out;
  overflow:hidden;
}
.card:not(:first-child) {
    margin-left: -50px;
  /* transform: translateX(-50px) */
}
.card .card-title{
  position:absolute;
  top:15%;
  left:15%;
  width:120px;
  text-align:center;
  font-size:1.5rem;
  transition: all 0.4s ease-out;
}
.card img{
  width:100%;
  height:100%;
  border-radius:10px;
   -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  transition: all 0.4s ease-in;
}
.card .card-description{
  position:absolute;
  width:150px;
  text-align:center;
  top:60%;
  left:50%;
  transform: translateY(-50%) translateX(-50%) scaleY(0);
  /* transform-origin: 50% 0; */
  font-size:1.5rem;
  opacity:0;
  /* height:0; */
}

.card:hover{
  transform: translateY(-20px);
  transition: 0.4s ease-out;
}
.card:hover img{
  transform: scale(1.2);
  transition: all 0.4s ease-in;
}
.card:hover ~ .card {
  transform: translateX(50px);
  transition: all 0.4s ease-out;
}
.card:hover .card-description{
  opacity:1;
  /* transform: translateY(auto); */
  transform: translateY(-50%) translateX(-50%) scaleY(1);
  transition: 0.4s ease-out;
}