呼吸按钮 - 纯CSS
2017-03-16 本文已影响0人
holidayPenguin
CSS呼吸按钮
直接上代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>呼吸按钮</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.breath_light {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
width: 40px;
height: 40px;
overflow: hidden;
background: #99dd33;
/* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
animation-name: breath; /* 动画名称 */
animation-duration: 1s; /* 动画时长3秒 */
animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
animation-iteration-count: infinite; /* 播放次数：无限 */
/* Safari and Chrome */
-webkit-animation-name: breath; /* 动画名称 */
-webkit-animation-duration: 1s; /* 动画时长3秒 */
-webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
-webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
}
@keyframes breath {
from { opacity: 1; width: 40px; height: 40px; } /* 动画开始时 */
50% { opacity: 1; width: 60px; height: 60px; border-radius: 30px;} /* 动画50% 时 */
to { opacity: 1; width: 40px; height: 40px; } /* 动画结束时 */
}
@-webkit-keyframes breath {
from { opacity: 1; width: 40px; height: 40px; } /* 动画开始时 */
50% { opacity: 1; width: 60px; height: 60px; border-radius: 30px;} /* 动画50% 时 */
to { opacity: 1; width: 40px; height: 40px; } /* 动画结束时的 */
}
</style>
</head>
<body>
<div class="breath_light" title="呼吸按钮"></div>
</body>
</html>
