CSS3特效 - 呼吸灯效果

1. 效果图

2. 代码如下

<!DOCTYPE html>
<html>
<head><meta http-equiv="content-type" content="text/html;charset=utf-8"/><title>呼吸灯</title><style type="text/css">/* css代码 */.breath_light {width: 300px;                                    /* 宽度 */height: 300px;                                    /* 高度 */border:#666 1px solid;border-radius:50%;opacity: 0.1;                                   /* 不透明度 */overflow: hidden;                               /* 溢出隐藏 */background:#FF3;                            /* 背景色 */margin: 25% auto;                               /* 外边距 *//* IE10、Firefox and Opera，IE9以及更早的版本不支持 */animation-name: breath;                         /* 动画名称 */animation-duration: 3s;                         /* 动画时长3秒 */animation-timing-function: ease-in-out;         /* 动画速度曲线：以低速开始和结束 */animation-iteration-count: infinite;            /* 播放次数：无限 *//* Safari and Chrome */-webkit-animation-name: breath;                 /* 动画名称 */-webkit-animation-duration: 3s;                 /* 动画时长3秒 */-webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */-webkit-animation-iteration-count: infinite;    /* 播放次数：无限 */
}@keyframes breath {from { opacity: 0.1; }                          /* 动画开始时的不透明度 */50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */
}@-webkit-keyframes breath {from { opacity: 0.1; }                          /* 动画开始时的不透明度 */50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */
}</style>
</head>
<body><div class="breath_light" title="呼吸灯"></div>
</body>
</html>

以上就是关于“ CSS3特效 - 呼吸灯效果 ” 的全部内容。

CSS3特效 - 呼吸灯效果相关推荐

css3实现科技感的呼吸灯效果
呼吸灯效果是一种常见的灯光效果,比如网页的按钮,现实生活中比如电脑的开机按钮. 使用CSS3的animation方法可以实现很多迷人的网页动画特效. 使用CSS3 配合box-shadow即可实现类似 ...
css怎么动画中该透明度,通过css3动画和opacity透明度实现呼吸灯效果
本文介绍了通过css3动画和opacity透明度实现呼吸灯效果的方法,分享给大家,具体如下: 呼吸灯 /*也可以通过加层罩,通过设置层罩透明度来实现亮度动画*/ body{ background-co ...
用CSS3快速实现呼吸灯效果-案例
呼吸灯效果核心 @keyframes breath {from { opacity: 0.1; } /* 动画开始时的不透明度 */50% { opacity: 1; } /* 动画50% 时的不透 ...
jQuery+js+css实现键盘按键呼吸灯效果
#直接上效果图: ##说明:需要引入jQuery文件,图片地址自选本地即可 <!DOCTYPE html> <html lang="en"><head ...
Arduino ESP32利用PWM实现板载LED呼吸灯效果
Arduino ESP32利用PWM实现板载LED呼吸灯效果 LEDC简介 LED控制(LEDC)外围设备主要用于控制LED的强度,尽管它也可以用于生成PWM信号用于其他目的.它具有16个通道,可以生 ...
一个定时器实现IO模拟pwm，呼吸灯效果
以定时器1为例 uchar time1_10ms = 0; uchar time1_100ms = 0; bit IS_10ms = 0; bit IS_100ms = 0; ...
ESP32-C3使用LEDC外设实现呼吸灯效果
这次有一个项目计划使用ESP32-C3来做主控. 根据手册可以知道,ESP32-C3自带一个LED控制器. 这个控制器可以方便的实现呼吸灯效果.那接下来我们盘它. 本次实验使用的板子是安信可的ESP- ...
STM32:PWM驱动LED达到呼吸灯效果(内含：1.接线原理图/实物图+2.代码部分+3.注意事项/补充知识点部分)
1.接线原理图: LED正极接PA0,负极接GND,即高电平电亮,低电平熄灭.占空比越大,LED越亮:占空比越小,LED越暗. 实物图: LED在不断的改变亮度,实现呼吸灯效果.(是LED完全亮完全灭 ...
STM32 定时器2 CH1 CH2 PWM输出产生呼吸灯效果
PWM一般用来驱动电机(控制速度),控制LED亮度,驱动开关电源电路等等,本实例通过改变PWM占空比的方式来驱动LED灯,形成呼吸灯的效果.用这种方式来学习STM32 TIM2输出PWM的配置. 以S ...

CSS3特效 - 呼吸灯效果

CSS3特效 - 呼吸灯效果

1. 效果图

2. 代码如下

CSS3特效 - 呼吸灯效果相关推荐

最新文章

热门文章