鼠标移入图片出现闪光效果的实现
放在hover里不让鼠标离开又从675过渡回到-170px 放在这里就是说只有鼠标hover的时候才监控运动，离开鼠标不监控运动
Bash
<!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/201903091552103916951058.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/7564.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
