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>
