SOURCE

<div class='card'>
	<div class='content'>
  <Image class='pic' src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1427619798,3243000733&fm=26&gp=0.jpg'>
  </image>
  <div class='light'></div>
  </div>
  <p class='content'>段落信息段落信息段落信息段落信息段落信息段落信息段落信息段落信息   </p>
</div>

<div class='banner'>
  <Image class='pic' src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1427619798,3243000733&fm=26&gp=0.jpg'>
  </image>
  <div class='banner-light'></div>

<div class="Line"></div>
</div>

.card {
  width: 200px;
  height: 300px;
  text-align: center;
  padding: 40px;
  border-radius: 6px; 
  transition: 0.5s;
}
.content {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.pic {
  width: 100%;
  display: block;
}
.card:hover { 
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .15); 
  transform: translate3d(0, -5px, 0);
}
.card:hover .light{ 
   left: 264px; 
   transition: 0.5s;
}
.light {
    position: absolute;
    left: -120px;
    top: 0px;
    width: 100%;
    height: 130px;
    background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
    transform: skewx(-30deg);
}

.banner {
  width: 280px;
  margin-left: 30px;
  overflow: hidden;
  position: relative;
}
.banner-light {
   position: absolute;
    left: -120px;
    top: 0px;
    width: 100%;
    height: 130px;
    background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
    transform: skewx(-30deg);
    animation: toshift 3s linear infinite;
}
@keyframes toshift{
  0% {
    transform: skewx(-30deg) translateX(-130px);
  }
  100% {
    transform: skewx(-30deg) translateX(300px);
  }
}
.Line{
    width:1px;
    height:500px;
    background:linear-gradient(244deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
}