css 实现呼吸灯效果

先看效果：

动画的结果就想实在呼吸,完整的代码如下：

<template><div class="container"><div class="long-breath"></div></div>
</template><style  lang="less">
html, body{height: 100%;background-color: white;
}
.container{position: relative;width: 100%;height: 80px;.long-breath {position: absolute;width: 100px;left: 0;bottom: 0;animation: 2s shadowBreath ease-out infinite normal;background: #ffffff;}
}
@keyframes shadowBreath {0%,100% {box-shadow: 0 0 4px 1px rgba(42, 170, 255, 0.7);}50% {box-shadow: 0 0 20px 5px rgb(42, 170, 255);}
}
</style>