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

相关推荐
fanruitian3 小时前
uniapp android开发 测试板本与发行版本
前端·javascript·uni-app
rayufo3 小时前
【工具】列出指定文件夹下所有的目录和文件
开发语言·前端·python
RANCE_atttackkk3 小时前
[Java]实现使用邮箱找回密码的功能
java·开发语言·前端·spring boot·intellij-idea·idea
2501_944525545 小时前
Flutter for OpenHarmony 个人理财管理App实战 - 支出分析页面
android·开发语言·前端·javascript·flutter
李白你好5 小时前
Burp Suite插件用于自动检测Web应用程序中的未授权访问漏洞
前端
刘一说6 小时前
Vue 组件不必要的重新渲染问题解析:为什么子组件总在“无故”刷新?
前端·javascript·vue.js
徐同保7 小时前
React useRef 完全指南:在异步回调中访问最新的 props/state引言
前端·javascript·react.js
刘一说8 小时前
Vue 导航守卫未生效问题解析:为什么路由守卫不执行或逻辑失效?
前端·javascript·vue.js
一周七喜h8 小时前
在Vue3和TypeScripts中使用pinia
前端·javascript·vue.js
weixin_395448918 小时前
main.c_cursor_0202
前端·网络·算法