有趣的css - 呼吸灯按钮

设计师工作日常

已于 2024-03-11 11:23:53 修改

阅读量799

点赞数 12

分类专栏：有趣的css 文章标签： css 前端 ux ui 呼吸灯按钮

于 2024-03-09 13:58:53 首次发布

本文链接：https://blog.csdn.net/justliu1989/article/details/136582169

版权

有趣的css 专栏收录该内容

70 篇文章 2 订阅

订阅专栏

本文介绍了一个通过CSS实现的模拟微信发送语音按钮的呼吸灯效果，包括核心HTML和CSS代码，展示了如何使用:hover和:active伪类，以及@keyframes创建动态动画。

摘要由CSDN通过智能技术生成

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是一个好玩的呼吸灯效果按钮。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

整体效果

模拟微信发送语音按钮，在按住按钮时增加呼吸灯效果。

一个好玩的呼吸灯效果按钮。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<button class="btn31">按住说话</button>

主体一个 button 标签。

css 部分代码

.btn31{
  width: 190px;
  height: 42px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background-color: #333;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  transition: 0.3s;
}
.btn31:hover{
  background-color: #3185fa;
}
.btn31:active{
  animation: btn31-eff 3s linear infinite;
}
@keyframes btn31-eff{
  0%{
    box-shadow: 0 0 2px #3185fa;
  }
  50%{
    box-shadow: 0 0 40px #3185fa;
  }
  100%{
    box-shadow: 0 0 2px #3185fa;
  }
}

通过 :hover 和 :active 获取状态，分别设置不同的样式，当按钮按下时，增加 animation 动画并设置参数，让按钮阴影产生变化来实现呼吸灯效果。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>呼吸灯按钮</title>
  </head>
  <body>
    <div class="app">
      <button class="btn31">按住说话</button>
    </div>
  </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn31{
  width: 190px;
  height: 42px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background-color: #333;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  transition: 0.3s;
}
.btn31:hover{
  background-color: #3185fa;
}
.btn31:active{
  animation: btn31-eff 3s linear infinite;
}
@keyframes btn31-eff{
  0%{
    box-shadow: 0 0 2px #3185fa;
  }
  50%{
    box-shadow: 0 0 40px #3185fa;
  }
  100%{
    box-shadow: 0 0 2px #3185fa;
  }
}