【CSS】CSS实现元素逐渐消失(实现元素透明逐渐消失/模糊)

css 复制代码
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%);

mask-image 属性用于定义一个遮罩,它可以隐藏元素的一部分或全部内容。在这个示例中,我们使用 mask-image 属性来定义一个线性渐变的遮罩,使得列表项的内容在鼠标悬停时从完全不透明到完全透明的过程中渐变。列表项的内容会从下至上逐渐变暗,直到完全隐藏。
效果如下

相关推荐
熊猫钓鱼>_>17 分钟前
建筑IT数字化突围:建筑设计企业的生存法则重塑
前端·javascript·easyui
GISer_Jing2 小时前
前端性能指标及优化策略——从加载、渲染和交互阶段分别解读详解并以Webpack+Vue项目为例进行解读
前端·javascript·vue
不知几秋2 小时前
数字取证-内存取证(volatility)
java·linux·前端
水银嘻嘻4 小时前
08 web 自动化之 PO 设计模式详解
前端·自动化
Zero1017136 小时前
【详解pnpm、npm、yarn区别】
前端·react.js·前端框架
&白帝&6 小时前
vue右键显示菜单
前端·javascript·vue.js
Wannaer6 小时前
从 Vue3 回望 Vue2:事件总线的前世今生
前端·javascript·vue.js
羽球知道6 小时前
在Spark搭建YARN
前端·javascript·ajax
光影少年7 小时前
vue中,created和mounted两个钩子之间调用时差值受什么影响
前端·javascript·vue.js
青苔猿猿7 小时前
node版本.node版本、npm版本和pnpm版本对应
前端·npm·node.js·pnpm