【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 属性来定义一个线性渐变的遮罩,使得列表项的内容在鼠标悬停时从完全不透明到完全透明的过程中渐变。列表项的内容会从下至上逐渐变暗,直到完全隐藏。
效果如下

相关推荐
恋猫de小郭5 分钟前
你还用 IDE 吗? AI 狂欢时代下 Cursor 慌了, JetBrains 等 IDE 的未来是什么?
前端·flutter·ai编程
明月_清风11 分钟前
拒绝盲目 Git:VS Code 神级插件 GitLens 的 9 个进效杀手锏
前端·git
孟祥_成都14 分钟前
用 AI,0 基础复刻网页顶级特效!😀
前端·javascript·vibecoding
万少7 小时前
小龙虾(openclaw),轻松玩转自动发帖
前端·人工智能·后端
Jagger_9 小时前
抱怨到躺床关灯的一次 DIY 记录
前端
陈随易12 小时前
前端大咖mizchi不满Rust、TypeScript却爱上MoonBit
前端·后端·程序员
whinc13 小时前
🚀 两年小程序开发,我把踩过的坑做成了开源 Skills
前端·微信小程序·ai编程
sure28214 小时前
React Native中创建自定义渐变色
前端·react native
KKKK15 小时前
SSE(Server-Sent Events)流式传输原理和XStream实践
前端·javascript
子兮曰15 小时前
Humanizer-zh 实战:把 AI 初稿改成“能发布”的技术文章
前端·javascript·后端