css 实现呼吸灯效果

先看效果:


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

html 复制代码
<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>
相关推荐
quweiie14 分钟前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀20 分钟前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻23 分钟前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树1 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔1 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城1 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
Asthenia04121 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj502 小时前
前端基础之《React(1)—webpack简介》
前端·react
被巨款砸中2 小时前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
文韬_武略2 小时前
web vue之状态管理Pinia
前端·javascript·vue.js