图片光影一闪而过

最新推荐文章于 2021-12-04 00:12:31 发布

奋斗的小菇凉

最新推荐文章于 2021-12-04 00:12:31 发布

阅读量97

点赞数

分类专栏： css

原文链接：https://blog.csdn.net/huichao199175/article/details/106230685

版权

css 专栏收录该内容

26 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>光影效果</title>
	<style>
		body{
			background-color: #ccc;
		}
		.box{
			position: relative;
			margin: 50px auto;
			width: 400px;
			height: 500px;
			background: url(img/1.jpg);
			overflow: hidden;
			cursor: pointer;
		}
		img{
			width: 100%;
		}
		.box:after{
			position: absolute;
			left: -100%;                    /*改变left的值，让其相对box影藏*/
			top: 0;
			width: 30%;
			height: 100%;
			content: "";
			/* Safari 5.1 - 6.0 */
		  background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
		  /* Opera 11.1 - 12.0 */
		  background: -o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
		  /* Firefox 3.6 - 15 */
		  background: -moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
		  /* 标准的语法 */
		  background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
	    transform: skewX(-45deg);
		}
		.box:hover:after{
			left: 150%;
	    	transition: 1s ease;
		}
	</style>
</head>
<body>
	<div class="box">
		
	</div>
</body>
</html>