SOURCE

console 命令行工具 X clear

                    
>
console
<div class="wrap">
  <!-- 鼠标移入,元素上浮,并有镜面闪光效果划过 -->
  <div class="box">
    <i class="right"></i>
  </div>
</div>
.wrap {
  padding: 50px;
  background: #fff;
}
.box {
  overflow:hidden;
  position: relative;
  width: 240px;
  height: 200px;
  background: #89d04f;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.box:hover {
  transform: translateY(-6px);
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
    -webkit-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
    -moz-box-shadow: 0 26px 40px -24px rgba(0,36,100,.5);
}
.box .right {
  cursor: pointer;
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5),hsla(0,0%,100%,0));
  transform: skewx(-25deg);
  -o-transform: skewx(-25deg);
  -moz-transform: skewx(-25deg);
  -webkit-transform: skewx(-25deg);
}
.box:hover .right {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    left: 100%;
}