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

叁歲伎倆 2023-01-23 13:50 279阅读 0赞

# 呼吸灯效果 #

![20210715114253893.gif][]

##  核心 ##

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

### 源码-[在线展示][Link 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>

[20210715114253893.gif]: /images/20221004/ccbd7f6baf5c426cb67e483f99597fe7.png
[Link 1]: https://jackiedyh.github.io/DemoTest/%E6%A1%88%E4%BE%8B%E6%B5%8B%E8%AF%95/%E6%A1%88%E4%BE%8B-c3-transition-%E5%91%BC%E5%90%B8%E7%81%AF-%E8%BF%87%E6%B8%A1%E6%95%88%E6%9E%9C.html