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/mip/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,我们将及时处理。
微信扫码关注
更新实时通知