图片闪光效果（纯css）

最新推荐文章于 2024-08-14 09:51:23 发布

接受现实？

最新推荐文章于 2024-08-14 09:51:23 发布

阅读量613

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_44260144/article/details/94453561

版权

<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>闪光效果</title>
	<style type="text/css">
	*{
	padding:0;
	margin:0;
	width: 100%;
	}
	.box{
	width: 400px;
	height: 400px;
	margin: 100px auto;
	position: relative;
	overflow: hidden;
	}
	.flash{
	position: absolute;
	left:-165px;
	top:0px;
	width: 20px;
	height: 400px;
	background:-webkit-linear-gradient(left,transparent,rgba(255,255,255,0.5),transparent);
	transform:skew(-30deg);
	}
	.box:hover .flash{
	left: 510px;
	transition: all 1s;
	}
	</style>
	</head>
	<body>
	<div class="box">
	<img src="doller.jpg">
	<div class="flash"></div>
	</div>
	</body>
	</html>