呼吸灯效果

核心

@keyframes breath {from { opacity: 0.1; }                          /* 动画开始时的不透明度 */50%  { opacity:   1; }                          /* 动画50% 时的不透明度 */to   { opacity: 0.1; }                          /* 动画结束时的不透明度 */
}

源码-在线展示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>transition-呼吸灯-过渡-by JackeDYH</title><style type="text/css">div {width: 100px;height: 100px;background: red;transition: width 2s;-webkit-transition: width 2s;transition: all 2s ease-out 0s;-webkit-transition: all 2s ease-out 0s;transition: all 2s ease 0s;-webkit-transition: all 2s ease 0s;transition: width 2s ease 0s, height 1s cubic-bezier(0.4, 0, 0.2, 1) 0s;transition: margin-top 0.2s ease 0s, margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, width 2s ease 0s, height 1s cubic-bezier(0.4, 0, 0.2, 1) 0s;animation: myfirst 2700ms ease-in-out infinite alternate;}div:hover {width: 300px;height: 200px;margin-top: 20px;margin-left: 30px;background: #006DB7;animation: glow 800ms ease-out infinite alternate;}@keyframes glow {0% {border-color: #393;box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 1px 0 #393;}100% {border-color: #6f6;box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 1px 0 #6f6;}}@-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);}}@keyframes myfirst {0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}/* =========================== */.breath_light {width: 400px;                                    /* 宽度 */height: 30px;                                    /* 高度 */opacity: 0.1;                                   /* 不透明度 */overflow: hidden;                               /* 溢出隐藏 */background: #99dd33;                            /* 背景色 */margin: 10% auto;                               /* 外边距 *//* 圆角兼容 */-webkit-border-radius: 2px;       /*Webkit:谷歌支持：圆角*/-moz-border-radius: 2px;          /*Mozilla:火狐支持：圆角*/-ms-border-radius: 2px;           /*Microsoft:IE9支持：圆角*/-o-border-radius: 2px;            /*Opera支持：圆角*/border-radius: 2px;               /*圆角*//* 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></div><div class="breath_light" title="呼吸线"></div></body>
</html>

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

css怎么动画中该透明度,通过css3动画和opacity透明度实现呼吸灯效果
本文介绍了通过css3动画和opacity透明度实现呼吸灯效果的方法,分享给大家,具体如下: 呼吸灯 /*也可以通过加层罩,通过设置层罩透明度来实现亮度动画*/ body{ background-co ...
css3实现科技感的呼吸灯效果
呼吸灯效果是一种常见的灯光效果,比如网页的按钮,现实生活中比如电脑的开机按钮. 使用CSS3的animation方法可以实现很多迷人的网页动画特效. 使用CSS3 配合box-shadow即可实现类似 ...
CSS3特效 - 呼吸灯效果
CSS3特效 - 呼吸灯效果 1. 效果图 2. 代码如下 <!DOCTYPE html> <html> <head><meta http-equiv=&qu ...
STM32使用延时控制LED灯亮暗变换，LED呼吸灯效果
STM32F407ZE 使用延时控制LED灯亮暗变换,实现LED呼吸灯效果具体代码如下: main.c部分 #include <stm32f4xx.h> #include "s ...
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完全亮完全灭 ...

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

呼吸灯效果

核心

源码-在线展示

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

最新文章

热门文章