实现思路：要运动加一个定位，然后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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知