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

雨点打透心脏的1/2处 2021-08-13 17:04 876阅读 1赞

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

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

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

[![aHR0cDovL2Nkbi50aGlzanMuY29tL2dpdGh1Yi9HSUYuZ2lm][]][aHR0cDovL2Nkbi50aGlzanMuY29tL2dpdGh1Yi9HSUYuZ2lm 1]

样式代码如下

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
</pre> </td> 
   <td> <pre> .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;
    }
}
</pre> </td> 
  </tr> 
 </tbody> 
</table>

HTML 代码

<table> 
 <tbody> 
  <tr> 
   <td> <pre>1
</pre> </td> 
   <td> <pre>&lt;div class="breathe-div"&gt;&lt;/div&gt;
</pre> </td> 
  </tr> 
 </tbody> 
</table>

[aHR0cDovL2Nkbi50aGlzanMuY29tL2dpdGh1Yi9HSUYuZ2lm]: /images/20210813/b220d8c19cad4bc4bd996122af5807a3.png
[aHR0cDovL2Nkbi50aGlzanMuY29tL2dpdGh1Yi9HSUYuZ2lm 1]: http://cdn.thisjs.com/github/GIF.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，876人围观）

还没有评论，来说两句吧...

相关阅读

相关用CSS3快速实现呼吸灯效果-案例

呼吸灯效果 ![20210715114253893.gif][] 核心 @keyframes breath { from { opacity:

叁歲伎倆/ 2023年01月23日 13:50/ 0 赞/ 300 阅读

相关 CSS - 呼吸灯效果动画（淡隐淡出效果）

效果图 > 只是简单的呼吸效果，您按照需求自己拓展即可。 ![在这里插入图片描述][20201128125739868.gif_pic_cener] 代码

喜欢ヅ旅行/ 2022年12月24日 12:55/ 0 赞/ 118 阅读

相关涟漪扩散效果（呼吸灯效果）

涟漪扩散效果（呼吸灯效果）整体效果实现思路整体效果涟漪扩散这样多层级向外扩散可调整运动速度 ![在这里插入图片描述]

川长思鸟来/ 2022年11月19日 07:38/ 0 赞/ 254 阅读

相关 51单片机——实现呼吸灯&程序代码

实现效果如图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

朱雀/ 2022年11月12日 10:56/ 0 赞/ 490 阅读

相关 51单片机—— PWM、呼吸灯

51单片机通过定时器0产生 20ms/50HZ 的可调节 PWM 小灯的有效显示应该是50hz，所以周期是20ms 频率过小显示比较暗，频率过大不好调节定时器0，16位

以你之姓@/ 2022年11月07日 05:56/ 0 赞/ 194 阅读

相关单片机实现呼吸灯

项目描述：用渐变的PWM信号实现LED呼吸灯。 LED由暗逐渐变亮，再由亮逐渐变暗循环。 C语言代码如下： /-----------------------

青旅半醒/ 2022年10月01日 06:59/ 0 赞/ 210 阅读

相关纯 CSS 实现科技感十足的暗黑字符雨动画

本文将使用纯 CSS，带大家一步一步实现一个这样的科幻字符跳动背景动画。类似于这样的字符雨动画： ![f6571a5f0dbc50ab6a42ea12a779a549.gif

短命女/ 2022年09月06日 00:05/ 0 赞/ 353 阅读

相关 PWM －－呼吸灯

呼吸灯最早见于苹果的电脑，近年来，在各种手机上也频频出现。呼吸灯是很简单的东西，用一片 555，搭成一个多谐振荡器，再用 RC 电路滤成锯齿波，再驱动 LED 就

心已赠人/ 2022年08月20日 01:15/ 0 赞/ 279 阅读

相关 STM32 PWM之实现呼吸灯

STM32 PWM之实现呼吸灯一、简述记--使用定时器4输出PWM来实现呼吸灯效果。在人眼辨识能力范围内，调节LED亮的时间，达到

浅浅的花香味﹌/ 2022年03月26日 09:18/ 0 赞/ 466 阅读

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

呼吸灯效果是一种常见的灯光效果，比如网页的按钮，现实生活中比如电脑的开机按钮。使用CSS3的`animation`方法可以实现很多迷人的网页动画特效。使用CSS3 配合

雨点打透心脏的1/2处/ 2021年08月13日 17:04/ 1 赞/ 877 阅读