css+html实现喇叭或者呼吸灯闪烁效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>呼吸灯</title>
<style type="text/css">
/* css代码 */
.breath_light {
opacity: 0.1;
/* 不透明度 */
overflow: hidden;
/* 溢出隐藏 */
animation-name: breath;
/* 动画名称 */
animation-duration: 700ms;
/* 动画时长3秒 */
animation-timing-function: ease-in-out;
/* 动画速度曲线:以低速开始和结束 */
animation-iteration-count: infinite;
/* 播放次数:无限 */
-webkit-animation-name: breath;
/* 动画名称 */
-webkit-animation-duration: 700ms;
/* 动画时长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 title="呼吸灯">
<img class="breath_light" src="./calendar.png" style="height: 60px;width: 60px;" />
</div>
</body>
</html>