CSS3玻璃流光特效

最新推荐文章于 2024-08-10 15:26:46 发布

爱睡的虫虫

最新推荐文章于 2024-08-10 15:26:46 发布

阅读量2.6k

点赞数

分类专栏： CSS CSS3 文章标签： css3 流光效果

CSS3 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

当鼠标划过图片时有玻璃流光的质感.

<div id="container">
    <div class="image">
      <img src="http://ww4.sinaimg.cn/mw600/005vbOHfgw1ercvg85sr0j30jg0t6tdq.jpg" alt="Hello World" />
      <em></em>
    </div>
</div>

/CSS源代码/

body{
    background:#CFCFCF;
}
.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;
 }
}