网络建站知识

精准传达 • 价值共享

洞悉互联网前沿资讯,探寻网站营销规律

使用CSS3线性渐变实现图片闪光划过的效果

作者:狐灵科技 | 2019-12-29 17:11 |点击:

当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的。于是把这个效果再实现一下。

大体思想是,设计一个透明层i,skewx在X轴上做了负25度的变形,背景颜色用的是线性渐变linear-gradient,然后hover的时候,设置0.5s的动画时间。

同时在 i 层使用 cursor:pointer,如果不设置这个的话,需要等透明层动画之后才能看得到 pointer 指针。

 

 

HTML 如下:

<html>
<head></head>
<body>
    <p class="overimg"> 
        <a><img src="images/01.jpg" /></a> 
        <i class="light"></i> 
    </p>
</body>
</html>

 

CSS 为:
 

.overimg{
    position: relative;
    display: block;
    /* overflow: hidden; */
    box-shadow: 0 0 10px #FFF;
}
.light{
    cursor:pointer;
    position: absolute;
    left: -180px;
    top: 0;
    width: 180px;
    height: 90px;
    background-image: 
    -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    background-image: 
    -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    transform: skewx(-25deg);
    -o-transform: skewx(-25deg);
    -moz-transform: skewx(-25deg);
    -webkit-transform: skewx(-25deg);
}
.overimg:hover .light{
    left:180px;
    -moz-transition:1.5s;
    -o-transition:1.5s;
    -webkit-transition:1.5s;
    transition:1.5s;
}

多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

网站设计 品牌营销

多一份参考,总有益处

联系狐灵科技,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:023-68168040 / 大客户专线:15523356218