当前位置:主页 > 网站建设 > 网络建站知识 >

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

发表日期:2019-12-29 17:11文章编辑:狐灵科技浏览次数: 标签:使用,CSS3,线性,渐变,实现,图片,闪光,划过,的,

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

大体思想是,设计一个透明层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;
}

如没特殊注明,文章均为狐灵科技原创,转载请注明  http://www.hulingweb.cn/jzzs/774.html
  • 更多 +狐灵业务单元

    营销型网站建设 品牌创意网站 企业官方网站 上市公司网站 B2C电子商务网站 大型门户网站 专题活动网站 定制化电子商务 产品商城网站 移动手机电商网站 微信会员电商

  • 更多 +我们的优势

  • 更多 +关于狐灵

    狐灵致力于互联网品牌建设与网络营销,专业领域包括网站建设、电子商务、移动互联网营销、系统平台开发, 与其他网站建设及系统开发公司不同,我们的整合解决方案结合了狐灵网络品牌建设经验和互联网整合营销的理念,并将策略和执行紧密结合,且不断评估并优化我们的方案,为客户提供一体化全方位的互联网品牌整合方案!

更多 +联系我们

服务热线:15523356218座机专线:023-68168040

业务 QQ传真:023-68168040

售后专线15082661954售后QQ:

渠道合作邮箱Foxl@hulingweb.cn

我们的认知

在我们的对手消耗大量的时间停留在碎片化的互联网设计或者程序实现的时候,我们已经开始把数字化品牌建设和网络传播进行了整合。只有通过整体的互联网品牌分析,帮助企业家们进行互联网品牌建设,并传播企业品牌,并围绕品牌树立品牌价值,提升企业与用户的互相交流,与用户品牌交互,让用户能找专业的方法去解决问题。传播品牌,激起消费者品牌意识,在这过程中创造价值,这是我们成功的秘诀,也是我们帮助用户成功的诀窍,更是成就一流品牌的一条直达线。

不能否认的是,建设网站,创造互联网品牌价值的过程,是一种在互联网上艺术的行为,但互联网跟涂鸦全然不同,企业的品牌价值并不体现在希望品牌成为某个这种艺术家的作品。互联网传播的对象是用户,用户拥有自己的文化体系,群落共性才是互联网传播根本,这种传播才是互联网创造价值的体现,这种价值的体现呈现多样。空洞的好看没有实质是网站建设的闹剧,网站如果不能激发品牌价值和网络营销和帮助用户,则是网站建设的悲哀,这样的网站没有灵魂!所以,网站建设运营,网络营销必须得得人心,有非常好的用户体验,能够解决问题和需求,能够为梦想者创造和传播品牌价值,最后创造价值,狐灵与你同行!


HI,Are you ready?

  • 公司名称*
  • 邮箱*
  • 姓名*电话*

您需要的服务*

现有网站改版
我需要做微信营销
建设全新的企业网站
要找长期合作公司,需要年度服务
我需要做购物商城
我需要做系统平台
我需要做营销型网站
我需要优化推广

您最关注的地方*

对功能要求比较高
对设计创意要求比较高
需要可以购物支付
搜索引擎排名

预算*

5千以下 1万以下 1-2万 2-3万 3-5万 5-10万 10万以上 大型项目需要招标
验证码 看不清?点击更换 看不清? 点击更换

售前售前
售后售后
留言微信
Top