纯 CSS 挑战：创建呼吸灯效玻璃菜单（带流动光斑）

原创 于 2025-05-04 09:00:00 发布 · 688 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #html #开发语言

在现代网页设计中，独特的视觉效果能够极大地提升用户体验。今天，我们将迎接一个纯 CSS 挑战，创建一个具有呼吸灯效且带有流动光斑的玻璃菜单。通过运用 CSS 的各种特性，如渐变、动画、滤镜等，我们可以实现一个既美观又富有科技感的菜单。

实现思路

要实现这个呼吸灯效玻璃菜单，我们可以将整个过程拆分为以下几个主要步骤：

  1. 构建 HTML 结构：创建一个基本的 HTML 菜单结构，包含菜单项。
  2. 设计玻璃质感：使用 CSS 的 backdrop-filter 和 background-color 来模拟玻璃的模糊和半透明效果。
  3. 添加呼吸灯效：利用 CSS 动画，改变菜单的背景颜色和透明度，实现呼吸灯的效果。
  4. 创建流动光斑：通过渐变和动画，让一个光斑在菜单上流动。

代码实现

1. HTML 结构

首先，我们需要构建一个简单的 HTML 菜单结构。以下是示例代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>呼吸灯效玻璃菜单</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <nav class="glass-menu">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
</body>

</html>

在这段 HTML 代码中，我们创建了一个 <nav> 元素，类名为 glass-menu，其中包含一个无序列表 <ul>，每个列表项 <li> 中包含一个链接 <a>，代表菜单项。

2. CSS 样式

接下来，我们将使用 CSS 来实现玻璃质感、呼吸灯效和流动光斑。以下是完整的 CSS 代码：

/* 全局样式 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(135deg, #000000, #333333);
}

/* 玻璃菜单样式 */
.glass-menu {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    animation: breathing 3s infinite alternate;
    overflow: hidden;
}

/* 菜单项样式 */
.glass-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.glass-menu ul li {
    margin: 0 15px;
}

.glass-menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s;
}

.glass-menu ul li a:hover {
    color: #ffcc00;
}

/* 呼吸灯效动画 */
@keyframes breathing {
    0% {
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    }
    100% {
        background: rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.6);
    }
}

/* 流动光斑样式和动画 */
.glass-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: moving-light 5s infinite linear;
}

@keyframes moving-light {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

代码解释

全局样式
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(135deg, #000000, #333333);
}

这段代码将 body 元素设置为使用 Flexbox 布局，使菜单在页面中垂直和水平居中显示。同时，设置了一个渐变背景。

玻璃菜单样式
.glass-menu {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    animation: breathing 3s infinite alternate;
    overflow: hidden;
}
  • position: relative：为流动光斑的绝对定位提供参考。
  • background: rgba(255, 255, 255, 0.1)：设置半透明的白色背景。
  • backdrop-filter: blur(10px)：实现玻璃的模糊效果。
  • border-radius: 10px：设置菜单的圆角。
  • box-shadow：添加阴影，增强立体感。
  • animation: breathing 3s infinite alternate：应用呼吸灯效动画。
  • overflow: hidden：隐藏超出菜单区域的内容。
菜单项样式
.glass-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.glass-menu ul li {
    margin: 0 15px;
}

.glass-menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s;
}

.glass-menu ul li a:hover {
    color: #ffcc00;
}

这些代码设置了菜单项的样式，包括去除列表样式、使用 Flexbox 布局、设置链接颜色和悬停效果。

呼吸灯效动画
@keyframes breathing {
    0% {
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    }
    100% {
        background: rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.6);
    }
}

通过 @keyframes 定义了一个名为 breathing 的动画，在 0% 和 100% 的关键帧中改变菜单的背景颜色和阴影，实现呼吸灯效。

流动光斑样式和动画
.glass-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: moving-light 5s infinite linear;
}

@keyframes moving-light {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}
  • ::before 伪元素用于创建流动光斑。
  • background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent)：设置一个水平渐变，中间为半透明白色，两边为透明。
  • animation: moving-light 5s infinite linear：应用 moving-light 动画，使光斑从左到右无限循环移动。

完整代码

HTML 代码（index.html）

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>呼吸灯效玻璃菜单</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <nav class="glass-menu">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
</body>

</html>

CSS 代码（styles.css）

/* 全局样式 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(135deg, #000000, #333333);
}

/* 玻璃菜单样式 */
.glass-menu {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    animation: breathing 3s infinite alternate;
    overflow: hidden;
}

/* 菜单项样式 */
.glass-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.glass-menu ul li {
    margin: 0 15px;
}

.glass-menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s;
}

.glass-menu ul li a:hover {
    color: #ffcc00;
}

/* 呼吸灯效动画 */
@keyframes breathing {
    0% {
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    }
    100% {
        background: rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.6);
    }
}

/* 流动光斑样式和动画 */
.glass-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: moving-light 5s infinite linear;
}

@keyframes moving-light {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

总结

通过纯 CSS，我们成功创建了一个具有呼吸灯效和流动光斑的玻璃菜单。这个菜单不仅视觉效果独特，而且代码简洁易懂。你可以根据自己的需求调整动画的速度、颜色和样式，进一步定制这个菜单。希望这篇文章能为你的网页设计带来新的灵感！

将上述代码分别保存为 index.html 和 styles.css 文件，确保它们在同一目录下，然后在浏览器中打开 index.html 文件，即可看到呼吸灯效玻璃菜单的效果。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值