• css实现图片闪光效果


    1.这个效果是看到京东商城上的一个下效果,原本的思路是

    用js控制一个图片在某张需要闪光的图片上重复出现,但是

    网上找了一些资料,竟然是用css写的,真是太帅了!!!

    2.原理:在需要闪光的图片前添加before 属性;内容为空;

    宽为200px,高为100%,left:-150px,overflow:hiddden;

    background属性设置为渐变;颜色看自己需要;transform-skewX(-25deg)

    然后为before的content设置过渡动画:{left:150%,transiton:150px 1s ease 0s}

    就可以了;

    3:参考代码如下:

    img{800px;height:450px;margin:0 auto;}
    .img { display:block; position: relative; 800px; height:450px; margin:0 auto;}
    .img:before{ content: ""; position: absolute; 200px; height: 100%; top: 0; left: -150px; overflow: hidden;

    background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);

    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)), color-stop(100%, rgba(255,255,255,0)));

    background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);

    background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);

    -webkit-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg)

    }

    .img:hover:before { left: 150%; transition: left 1s ease 0s; }

    <div>
    <a href="#" class="img">
    <img src="img/1.jpg" alt="风景"/>
    </a>
    </div>

  • 相关阅读:
    libcurl在mac上编译
    Kafka入门经典教程
    mac kafka 环境搭建 以及PHP的kafka扩展
    Mac下安装php-memcached扩展
    Mac使用brew安装nginx,并解决端口80访问权限问题
    Git的基本使用汇总整理
    MySQL InnoDB 共享表空间和独立表空间
    VB中如何修改treeview的背景色
    转:Python yield 使用浅析
    设置TreeView背景色
  • 原文地址:https://www.cnblogs.com/vali/p/5658643.html
Copyright © 2020-2023  润新知