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

mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%);

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

相关推荐

  1. Unity中实现游戏对象逐渐放大的脚本教程

    2024-04-24 18:58:06       37 阅读
  2. js实现元素可拖拽方法

    2024-04-24 18:58:06       64 阅读
  3. dom元素+CSS实现阶梯动画效果

    2024-04-24 18:58:06       41 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-24 18:58:06       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-24 18:58:06       100 阅读
  3. 在Django里面运行非项目文件

    2024-04-24 18:58:06       82 阅读
  4. Python语言-面向对象

    2024-04-24 18:58:06       91 阅读

热门阅读

  1. 服用5年份筑基丹 - React篇

    2024-04-24 18:58:06       29 阅读
  2. 周报 | 24.4.15-24.4.21文章汇总

    2024-04-24 18:58:06       35 阅读
  3. Python和Julia河流湖泊沿海水域特征数值算法模型

    2024-04-24 18:58:06       28 阅读
  4. 笨蛋学C++【C++基础第二弹】

    2024-04-24 18:58:06       26 阅读
  5. OneFlow 概念清单

    2024-04-24 18:58:06       35 阅读
  6. MySQL 自建数据库慢日志分析

    2024-04-24 18:58:06       36 阅读
  7. 栈的简单应用:括号匹配

    2024-04-24 18:58:06       31 阅读