当鼠标移上去的时候，会有一道闪光在图片上划过，效果挺酷炫的。于是把这个效果再实现一下：
大体思想是，设计一个透明层我，skewx在x轴上做了负25度的变形，背景颜色用的是css3的线性渐变linear-gradient，然后hover的时候，设置0.5s的动画时间。
同时在i层使用cursor：pointer，如果不设置这个的话，需要等透明层动画之后才能看到
会更加清楚！
<！DOCTYPE html >
<html xmlns =“www.php.cn/1999/xhtml”>
<head>
<meta http-equiv =“Content-Type”content =“text / html; charset = utf-8”/>
<title>闪光图片</ title>
<style>
.overimg {
位置：亲戚;
显示：块;
/ * overflow：hidden; * /
box-shadow：0 0 10px #FFF;
}
。光{
cursor：pointer;
位置：绝对
左：-180px;
顶部：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））;
变换：skewx（-25deg）;
-o-transform：skewx（-25deg）;
-moz变换：skewx（-25deg）;
-webkit-transform：skewx（-25deg）;
}
.overimg：hover .light {
左：180px;
-moz-transition：0.5s;
-o-transition：0.5s;
-webkit转换：0.5s;
过渡：0.5s;
}
</ style>
</ head>
<body>
<p class =“overimg”>
<a> @@##@@ </a>
<i class =“light”> </ i>
</ p>
</ body>
</ html>以上就是CSS3实现一个效果酷炫的闪光特效代码的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
313
