一个网页控件的呼吸灯效果实例分享

最新推荐文章于 2024-12-17 20:26:34 发布

原创最新推荐文章于 2024-12-17 20:26:34 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

问题处理同时被 3 个专栏收录

27 篇文章

订阅专栏

开源

24 篇文章

订阅专栏

Jsp

23 篇文章

订阅专栏

本文介绍了一种使用CSS实现的呼吸灯效果，通过动画控制元素的透明度和阴影变化，达到渐变的点亮与变暗的效果。

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

呼吸灯效果实现，控件的呼吸灯效果

网页源码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
.breathe-btn{ position:relative; width:100px; height:10px; margin:40px auto; line-height:40px; border:1px solid #2b92d4; border-radius:5px; color:#fff; font-size:20px; text-align:center; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.3); overflow:hidden; background-image: -webkit-gradient(linear, left top, left bottom, from(#6cc3fe), to(#21a1d0));
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: breathe;
    -webkit-animation-duration: 2700ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}
@-webkit-keyframes breathe {
    0% { opacity: .2; box-shadow:0 1px 2px rgba(255,255,255,0.1);}
    100% { opacity: 1; border:1px solid rgba(59,235,235,1); box-shadow:0 1px 30px rgba(59,255,255,1);}
}
</style>
</head>
<body>
<div class="breathe-btn"></div>
</body>
</html>

效果图：

》》》