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

相关推荐
子兮曰12 小时前
OpenClaw入门:从零开始搭建你的私有化AI助手
前端·架构·github
吴仰晖13 小时前
使用github copliot chat的源码学习之Chromium Compositor
前端
1024小神13 小时前
github发布pages的几种状态记录
前端
不像程序员的程序媛15 小时前
Nginx日志切分
服务器·前端·nginx
北原_春希15 小时前
如何在Vue3项目中引入并使用Echarts图表
前端·javascript·echarts
尽意啊15 小时前
echarts树图动态添加子节点
前端·javascript·echarts
吃面必吃蒜15 小时前
echarts 极坐标柱状图 如何定义柱子颜色
前端·javascript·echarts
O_oStayPositive15 小时前
Vue3使用ECharts
前端·javascript·echarts
竹秋…15 小时前
echarts自定义tooltip中的内容
前端·javascript·echarts
宝贝露.15 小时前
Axure引入Echarts图无法正常显示问题
前端·javascript·echarts