css实现鼠标放上去半透明光片划过效果

.box {

position: relative;

overflow: hidden;

cursor: pointer;

width: 200px;

}

.box img {

width: 100%;

}

.box:before {

content: "";

position: absolute;

top: 0;

left: -127px;

width: 100px;

height: 100%;

transform: skewX(-30deg);

background-image: linear-gradient(270deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .5) 50%, hsla(0, 0%, 100%, 0));

}

.box:hover:before {

left: 240px;

transition: all .3s ease-in;

}

<div class="box">

<img src="http://www.lvyestudy.com/img/dance.gif" alt="" />

</div>

相关推荐
黑客老陈18 分钟前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
运维·服务器·前端·网络·安全·web3·xss
正小安24 分钟前
Vite系列课程 | 11. Vite 配置文件中 CSS 配置(Modules 模块化篇)
前端·vite
暴富的Tdy1 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se1 小时前
Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作
前端·vue.js·excel
m0_748235611 小时前
web 渗透学习指南——初学者防入狱篇
前端
℘团子এ1 小时前
js和html中,将Excel文件渲染在页面上
javascript·html·excel
z千鑫1 小时前
【前端】入门指南:Vue中使用Node.js进行数据库CRUD操作的详细步骤
前端·vue.js·node.js
m0_748250742 小时前
Web入门常用标签、属性、属性值
前端