CSS小玩法：纯CSS实现呼吸灯和文字毛玻璃效果

最新推荐文章于 2025-05-04 09:00:00 发布

嚯呀怪怪怪

最新推荐文章于 2025-05-04 09:00:00 发布

阅读量1.8k

点赞数 53

文章标签： css 前端 html5 动画 css3 程序人生

本文链接：https://blog.csdn.net/m0_46580983/article/details/144676152

版权

实现效果

在这里插入图片描述

呼吸灯效果

引人注目的视觉元素
呼吸灯效果是一种模拟真实灯光渐明渐暗的动态效果。它如同夜晚中轻轻闪烁的星光，或是幽静森林里若隐若现的萤火虫之光，能够瞬间吸引用户的目光。

营造氛围感
在用户界面设计中，无论是手机应用还是网页设计，呼吸灯效果可以为界面增添一种神秘而宁静的氛围。例如，在一个音乐播放器应用中，当用户切换到夜间模式时，带有呼吸灯效果的音符图标缓缓亮起又熄灭，仿佛将用户带入了一个充满音乐旋律的梦幻世界。

毛玻璃文字效果

独特的模糊美感
毛玻璃文字效果是通过特殊的渲染算法，使文字看起来像是透过一层磨砂玻璃所看到的一样。这种效果既保留了文字的基本轮廓和可读性，又给人一种朦胧、柔和的美感。

增强层次感与现代感
在现代的设计风格中，毛玻璃文字效果被广泛应用。它可以与清晰的背景元素形成鲜明对比，从而增强界面的层次感。比如在一些科技类产品的宣传页面上，使用毛玻璃文字效果来展示产品名称或标语，既体现了产品的高端、时尚特性，又能让整个页面布局更加丰富有质感。

代码实现

呼吸灯效果：

利用 @keyframes 定义 text-shadow 的渐变变化。
在 breathing-light 动画中，逐步改变文本周围的光晕颜色和强度，实现呼吸灯的效果。

毛玻璃效果：

通过伪元素 ::before 创建一个覆盖在文字下方的背景。
使用 backdrop-filter 属性应用毛玻璃效果。
动画 glass-blur 定义毛玻璃强度的切换，使其在不同阶段显得透明或模糊。

整体同步：

两个动画分别控制呼吸灯和毛玻璃效果。
动画持续时间和关键帧的切换同步，保证两者一致。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全栈开发指南针的呼吸灯</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: #1a1a1a;
      overflow: hidden;
      font-family: Arial, sans-serif;
    }

    .breathing-text {
      position: relative;
      font-size: 3rem;
      font-weight: bold;
      color: white;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      text-align: center;
      animation: breathing-light 4s infinite ease-in-out; /* 呼吸灯效果的动画 */
    }

    .breathing-text::before {
      content: attr(data-text); /* 使用自定义属性显示文本 */
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.1); /* 背景的初始透明效果 */
      backdrop-filter: blur(5px); /* 毛玻璃效果 */
      -webkit-backdrop-filter: blur(5px); /* Webkit 内核的毛玻璃效果 */
      border-radius: 10px; /* 圆角效果 */
      clip-path: inset(0); /* 保持背景大小一致 */
      z-index: -1; /* 确保伪元素在文字后面 */
      animation: glass-blur 4s infinite ease-in-out; /* 毛玻璃效果的动画 */
    }

    @keyframes breathing-light {
      0%, 100% {
        text-shadow: 0 0 10px #ff4d4d, 0 0 20px #ff4d4d, 0 0 40px #ff4d4d, 0 0 80px #ff4d4d; /* 红色光晕 */
      }
      50% {
        text-shadow: 0 0 20px #4d94ff, 0 0 40px #4d94ff, 0 0 80px #4d94ff, 0 0 160px #4d94ff; /* 蓝色光晕 */
      }
    }

    @keyframes glass-blur {
      0%, 100% {
        background: rgba(255, 255, 255, 0.1); /* 较低的透明度 */
        backdrop-filter: blur(5px); /* 较小的模糊程度 */
        -webkit-backdrop-filter: blur(5px);
      }
      50% {
        background: rgba(255, 255, 255, 0.3); /* 较高的透明度 */
        backdrop-filter: blur(15px); /* 较大的模糊程度 */
        -webkit-backdrop-filter: blur(15px);
      }
    }
  </style>
</head>
<body>
  <div class="breathing-text" data-text="全栈开发指南针">全栈开发指南针</div>
</body>
</html>

欢迎关注公众号：“全栈开发指南针”
这里是技术潮流的风向标，也是你代码旅程的导航仪！🚀
Let’s code and have fun! 🎉
开发指南针




> 欢迎关注公众号：“全栈开发指南针”
> 这里是技术潮流的风向标，也是你代码旅程的导航仪！🚀
> Let’s code and have fun! 🎉