css-有趣的css - 好看的呼吸灯效果_游戏逆向|游戏安全|yxfzedu.com

【css-有趣的css - 好看的呼吸灯效果】此文章归类为：["css","前端"]。

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

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

html 部分代码：

<div class="app">
  <span class="red"></span>
  <span class="green"></span>
  <span class="blue"></span>
</div>
  写出三个圆，class 分别为 .red、.green、.blue。 
 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{
    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{
    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{
    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 页面：
 
 <!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>好看的呼吸灯效果</title>
</head>
  <div class="app">
    <span class="red"></span>
    <span class="green"></span>
    <span class="blue"></span>
  </div>
</body>
</html>
 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{
    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{
    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{
    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] 阅读原文 
 我是 Just ，这里是「设计师工作日常」,求点赞求关注！！！` 
页面效果：完整代码如下

更多【css-有趣的css - 好看的呼吸灯效果】相关视频教程： www.yxfzedu.com

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

html 部分代码：

css 部分代码：

html 页面：

css 样式：

页面效果：

完整代码如下

相关文章推荐

其他链接

课程目录

技术交流QQ群