css3实现科技感的呼吸灯效果

最新推荐文章于 2025-06-04 08:46:11 发布

yusirxiaer

最新推荐文章于 2025-06-04 08:46:11 发布

阅读量1w

点赞数 10

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/yusirxiaer/article/details/101453208

css 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用CSS3的animation方法和box-shadow属性来实现一个迷人的呼吸灯效果，这种效果常见于网页按钮和电脑开机按钮等场景，通过代码示例详细展示了实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

呼吸灯效果是一种常见的灯光效果，比如网页的按钮，现实生活中比如电脑的开机按钮。

使用CSS3的animation方法可以实现很多迷人的网页动画特效。

使用CSS3 配合box-shadow即可实现类似的效果

样式代码如下

 .breathe-div {
    width: 100px;
    height: 100px;
    border: 1px solid #2b92d4;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    margin:150px auto;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: breathe;
    -webkit-animation-duration: 1500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}

@-webkit-keyframes breathe {
    0% {
        opacity: .4;
        box-shadow: 0 1px 2px rgba(0, 147, 223, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
    }

    100% {
        opacity: 1;
        border: 1px solid rgba(59, 235, 235, 0.7);
        box-shadow: 0 1px 30px #0093df, 0 1px 20px #0093df inset;
    }
}

HTML 代码