CSS3鼠标移入图片闪光划过效果的实现

时间：4年前阅读：5383

实现思路：要运动加一个定位，然后skew 扭曲，transition 过渡监控left 运动的时候1s的变化这个值放在hover里，要不然鼠标离开那条线又回到原来。

当hover的时候hertj ，.ujsrt它的值,放在hover里不让鼠标离开又从675过渡回到-170px 放在这里就是说只有鼠标hover的时候才监控运动，离开鼠标不监控运动

<!DOCTYPE html>    
<html lang="en">    
<head>    
	<meta charset="UTF-8">    
	<title>Document</title>    
	<style type="text/css">    
	*{    
		padding: 0;    
		margin: 0;    
	}    
	#hertj{    
		width: 550px;    
		height: 450px;    
		border: 1px solid black;    
		margin: 30px auto;    
		background: url(https://www.qiquanji.com/data/img/dmj/201904051554471444167490.jpg) no-repeat;    
		position: relative;    
		overflow: hidden;    
	}    
	#hertj .ujsrt{    
		width: 35px;    
		height: 450px;    
		background: -webkit-linear-gradient(left,transparent,rgba(255,255,255,0.3),transparent);    
		/*要运动加一个定位*/    
		position: absolute;    
		left: -170px;    
		top: 0;    
		/*扭曲   skew 扭曲*/    
		transform: skew(-30deg,0);    
		/*transition 过渡   监控left 运动的时候1s的变化  这个值放在hover里，要不然鼠标离开那条线又回到原来*/    
		/*transition: left 1s;*/    
	}    
	/*当hover的时候hertj ，.ujsrt它的值*/    
	#hertj:hover .ujsrt{    
		left: 675px;    
/*放在hover里不让鼠标离开又从675过渡回到-170px  放在这里就是说只有鼠标hover的时候才监控运动，离开鼠标不监控运动*/    
		transition: left 1s;    
	}    
	</style>    
</head>    
<body>    
	<div id="hertj">    
	<div class="ujsrt">    
	</div>    
	</div>    
</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

CSS3鼠标移入图片闪光划过效果的实现

网友评论