1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

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

实现思路:要运动加一个定位,然后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/post/7731.html

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: