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; /* 動畫速度曲線：以低速開始和結(jié)束 */
animation-iteration-count: infinite; /* 播放次數(shù)：無限 */
/* Safari and Chrome */
-webkit-animation-name: breath; /* 動畫名稱 */
-webkit-animation-duration: 1s; /* 動畫時長3秒 */
-webkit-animation-timing-function: ease-in-out; /* 動畫速度曲線：以低速開始和結(jié)束 */
-webkit-animation-iteration-count: infinite; /* 播放次數(shù)：無限 */
}
@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; } /* 動畫結(jié)束時 */
}
@-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; } /* 動畫結(jié)束時的 */
}
</style>
</head>
<body>
<div class="breath_light" title="呼吸按鈕"></div>
</body>
</html>