用CSS3快速实现呼吸灯效果-案例
Posted JackieDYH
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用CSS3快速实现呼吸灯效果-案例相关的知识，希望对你有一定的参考价值。
呼吸灯效果
核心
@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快速实现呼吸灯效果-案例的主要内容，如果未能解决你的问题，请参考以下文章