图片闪光效果的两种方法

目前想到两个方式：

通过在里层多增加一个i标签模拟实现

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
.imgbox{350px;height:350px;overflow:hidden;position:relative;margin:100px auto;}
.imgbox i {
    position: absolute;
    left: -100%;
    top: 0;
     100%;
    height: 100%;
    transform: skewx(-25deg);
    -o-transform: skewx(-25deg);
    -moz-transform: skewx(-25deg);
    -webkit-transform: skewx(-25deg);
    background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0))
}

.imgbox:hover i {
    left: 100%;
    transition: 1s;
    -o-transition: 1s;
    -moz-transition: 1s;
    -webkit-transition: 1s
}

</style>
</head>

<body>
    <div class="imgbox">
        <img src="img.jpg" />
        <i></i>
    </div>
</body>
</html>

二：通过伪类方式模拟，减少i标签。高级浏览器识别

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
.imgbox{350px;height:350px;overflow:hidden;position:relative;margin:100px auto;}
.imgbox:after{
    content: "";
    display:block;
    position: absolute;
    left: -100%;
    top: 0;
     100%;
    height: 100%;
    transform: skewx(-25deg);
    -o-transform: skewx(-25deg);
    -moz-transform: skewx(-25deg);
    -webkit-transform: skewx(-25deg);
    background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0))
}

.imgbox:hover:after{
    content: "";
    display:block;
    left: 100%;
    transition: 1s;
    -o-transition: 1s;
    -moz-transition: 1s;
    -webkit-transition: 1s
}

</style>
</head>

<body>
    <div class="imgbox">
        <img src="img.jpg" />
    </div>
</body>
</html>

转自：https://www.cnblogs.com/mmdrs/articles/3708564.html

相关阅读:
【Mysql学习笔记】浅析mysql的binlog
HBase 学习笔记---守护进程及内存调优
字符集例子-同一字符不同字符集编码不同及导入导出的乱码
随机访问
格式化的代价
读写文本文件
缓冲
加速I/O的基本规则
序列化再探讨
数据库I/O：CMP、Hibernate

原文地址：https://www.cnblogs.com/chm-blogs/p/11271041.html