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

好看的呼吸灯效果

整体效果
代码部分
- html 部分代码：
- css 部分代码：
完整代码如下
- html 页面：
- css 样式：
- 页面效果：

整体效果

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

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

代码部分

html 部分代码：

写出三个圆，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{
  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 页面：



    
    
    
    好看的呼吸灯效果

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;
  }
}