有趣的css - 好看的呼吸灯效果

整体效果

这个效果主要用 css3 的 animation 属性来实现的。

这个效果可以用作在网站的整体 Loading,也可以放在网站首屏当一个 banner 的背景也是非常棒的!

代码部分

html 部分代码:

html 复制代码
<div class="app">
  <span class="red"></span>
  <span class="green"></span>
  <span class="blue"></span>
</div>

写出三个圆,class 分别为 .red、.green、.blue。

css 部分代码:

css 复制代码
.app{
  width:100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
span{
  width: 60px;
  height: 60px;
  margin: 40px;
  border-radius: 50%;
}
.red{
  animation: just1 2s ease-in-out infinite alternate;
}
.green{
  animation: just2 3s ease-in-out infinite alternate;
}
.blue{
  animation: just3 4s ease-in-out infinite alternate;
}
@keyframes just1{
  0%{
    border: 5px solid rgba(255,0,0,0);
    box-shadow: 0 0 0 rgba(255,0,0,0),0 0 0 rgba(255,0,0,0) inset;
  }
  100%{
    border: 5px solid rgba(255,0,0,1);
    box-shadow: 0 0 70px rgba(255,0,0,0.7),0 0 15px rgba(255,0,0,0.5) inset;
  }
}
@keyframes just2{
  0%{
    border: 5px solid rgba(0,255,0,0);
    box-shadow: 0 0 0 rgba(0,255,0,0),0 0 0 rgba(0,255,0,0) inset;
  }
  100%{
    border: 5px solid rgba(0,255,0,1);
    box-shadow: 0 0 70px rgba(0,255,0,0.7),0 0 15px rgba(0,255,0,0.5) inset;
  }
}
@keyframes just3{
  0%{
    border: 5px solid rgba(0,0,255,0);
    box-shadow: 0 0 0 rgba(0,0,255,0),0 0 0 rgba(0,0,255,0) inset;
  }
  100%{
    border: 5px solid rgba(0,0,255,1);
    box-shadow: 0 0 70px rgba(0,0,255,0.7),0 0 15px rgba(0,0,255,0.5) inset;
  }
}

css 部分主要使用 animation 来实现边框及其阴影的大小变化,和其透明度的变化。

完整代码如下

html 页面:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>好看的呼吸灯效果</title>
</head>
<body>
  <div class="app">
    <span class="red"></span>
    <span class="green"></span>
    <span class="blue"></span>
  </div>
</body>
</html>

css 样式:

css 复制代码
/** style.css **/

*{
  margin:0;
  padding: 0;
}
body,html{
  background-color: #000;
}
.app{
  width:100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
span{
  width: 60px;
  height: 60px;
  margin: 40px;
  border-radius: 50%;
}
.red{
  animation: just1 2s ease-in-out infinite alternate;
}
.green{
  animation: just2 3s ease-in-out infinite alternate;
}
.blue{
  animation: just3 4s ease-in-out infinite alternate;
}
@keyframes just1{
  0%{
    border: 5px solid rgba(255,0,0,0);
    box-shadow: 0 0 0 rgba(255,0,0,0),0 0 0 rgba(255,0,0,0) inset;
  }
  100%{
    border: 5px solid rgba(255,0,0,1);
    box-shadow: 0 0 70px rgba(255,0,0,0.7),0 0 15px rgba(255,0,0,0.5) inset;
  }
}
@keyframes just2{
  0%{
    border: 5px solid rgba(0,255,0,0);
    box-shadow: 0 0 0 rgba(0,255,0,0),0 0 0 rgba(0,255,0,0) inset;
  }
  100%{
    border: 5px solid rgba(0,255,0,1);
    box-shadow: 0 0 70px rgba(0,255,0,0.7),0 0 15px rgba(0,255,0,0.5) inset;
  }
}
@keyframes just3{
  0%{
    border: 5px solid rgba(0,0,255,0);
    box-shadow: 0 0 0 rgba(0,0,255,0),0 0 0 rgba(0,0,255,0) inset;
  }
  100%{
    border: 5px solid rgba(0,0,255,1);
    box-shadow: 0 0 70px rgba(0,0,255,0.7),0 0 15px rgba(0,0,255,0.5) inset;
  }
}

页面效果:


以上就是所有代码,css3 有很多好玩的属性,可以实现非常多的效果,让页面视觉变的更丰富多彩!


1\] [阅读原文](https://mp.weixin.qq.com/s/muCIhoLC43Ac1qSicdyeIQ) 我是 Just ,这里是「设计师工作日常」,求点赞求关注!!!\`

相关推荐
2301_7683502313 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
华洛15 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼15 小时前
opentype.js 使用与文字渲染
前端·svg·字体
90后的晨仔15 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js
今天头发还在吗15 小时前
【React】动态SVG连接线实现:图片与按钮的可视化映射
前端·javascript·react.js·typescript·前端框架
小刘不知道叫啥15 小时前
React 源码揭秘 | suspense 和 unwind流程
前端·javascript·react.js
szial15 小时前
为什么 React 推荐 “不可变更新”:深入理解 React 的核心设计理念
前端·react.js·前端框架
mapbar_front16 小时前
面试是一门学问
前端·面试
90后的晨仔16 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(二)?
前端·vue.js
90后的晨仔16 小时前
Vue 3 中 Provide / Inject 在异步时不起作用原因分析(一)?
前端·vue.js