首页 工作时间 9:00-17:30 关注我们
当前位置:首页 > 建站百科 > 实验室 >

纯CSS3鼠标特效-图片流光特效

来源: 九度工作室 阅读:次 时间:18-08-08 11:59

Hello World

/*CSS源代码*/
 
.image {
  position: relative;
  overflow:hidden;
  width: 300px;
  height: 450px;
}
img {
  width:300px;
  height: 450px;
}
em {
  position: absolute;
  display:block;
  width: 200px;
  height: 450px;
  background:#fff;
  top: 0;
  left: -400px;
  translate: -webkit-transform: skewY(25deg);
  -moz-transform: skewX(-25deg);
  -ms-transform: skewX(-25deg);
  -o-transform: skewX(-25deg);
  transform: skewX(-25deg);
  background:linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  -o-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
}
.image:hover em {
  left:400px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
 }
}