CSS3鼠标悬停图片时镜面白光闪过

最新推荐文章于 2025-06-20 10:00:22 发布

转载最新推荐文章于 2025-06-20 10:00:22 发布 · 3.3k 阅读

文章标签：

#css3 #html5

div+css 同时被 2 个专栏收录

89 篇文章

订阅专栏

html5+css3

25 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS创建的闪光图片效果。通过设置特定的CSS样式，可以在鼠标悬停时使图片产生闪光效果。文章包含完整的代码示例，展示了如何通过渐变背景和变形属性实现这一视觉效果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>闪光图片</title>
<style>
*{ margin:0; padding:0;}
.box{
	position: relative;
	box-shadow: 0 0 10px #FFF;
}
em{
	position: absolute;
	left: -180px;
	top: 0;
	width: 180px;
	height: 110px;
	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);
}
.box:hover em{
	left:180px;
	-moz-transition:0.5s;
	-o-transition:0.5s;
	-webkit-transition:0.5s;
	transition:0.5s;
}
</style>
</head>
<body>
    <div class="box">
        <a href="#"><img src="http://ww3.sinaimg.cn/large/6b002b97gw1esbsin2dhcj205002uglf.jpg"></a>
        <em></em>
    </div>
</body>
</html>