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

相关推荐
max5006002 分钟前
基于桥梁三维模型的无人机检测路径规划系统设计与实现
前端·javascript·python·算法·无人机·easyui
excel16 分钟前
使用函数式封装绘制科赫雪花(Koch Snowflake)
前端
萌萌哒草头将军1 小时前
Node.js v24.6.0 新功能速览 🚀🚀🚀
前端·javascript·node.js
rannn_1112 小时前
【Javaweb学习|黑马笔记|Day1】初识,入门网页,HTML-CSS|常见的标签和样式|标题排版和样式、正文排版和样式
css·后端·学习·html·javaweb
持久的棒棒君3 小时前
启动electron桌面项目控制台输出中文时乱码解决
前端·javascript·electron
小离a_a3 小时前
使用原生css实现word目录样式,标题后面的...动态长度并始终在标题后方(生成点线)
前端·css
郭优秀的笔记4 小时前
抽奖程序web程序
前端·css·css3
布兰妮甜4 小时前
CSS Houdini 与 React 19 调度器:打造极致流畅的网页体验
前端·css·react.js·houdini
小小愿望4 小时前
ECharts 实战技巧:揭秘 X 轴末项标签 “莫名加粗” 之谜及破解之道
前端·echarts
小小愿望5 小时前
移动端浏览器中设置 100vh 却出现滚动条?
前端·javascript·css