纯css3实现会呼吸的肥皂泡漂浮特效

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天，点击查看活动详情

前言

全都是泡沫，虽然一刹花火~邓紫棋的泡沫相信大家都听过的吧？通过css的方式来模拟一个肥皂泡应该是件挺有趣的事情呢，接下来，我们就尝试一下通过css的方式来绘制一个肥皂泡

需要用到的css属性预告

• flex 布局所需，非常常见了，没什么好讲的
• box-shadow 模拟肥皂泡的核心元素，五彩斑斓的黑就是从肥皂泡的刹那破灭中而来的
• animation 一动不动的不是很好看，引入动画属性让泡泡动起来~
• filter 不管是高斯模糊还是呼吸特效，都离不开滤镜属性呢

核心实现

• 布局 简单的flex，剩下的就是重复样式而已,泡泡上的动画我们待会再说

 html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .paopao{
    position: relative;
    width: 200px;
    height: 200px;
    box-shadow: inset 0 0 25px rgba(255,255,255,.25);
    border-radius: 50%; 
    animation: paoEr 5s linear infinite both;
  }
<div class="paopao">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

• 模拟泡泡

这里，我们通过泡泡下的div，分别去模拟泡泡不同的面收到光照后的颜色情况，上下左右，四条边，注意看我们的div是没有宽高的，那么他的宽度或者高度就取决于我们的变长了，叠加上高斯模糊带来的毛玻璃效果，很容易我们就能实现四边不同色的效果

 .paopao>div{
    position: absolute;
    border-radius: 50%;

  }
  .paopao>div:nth-child(1) {
    border-left: 15px solid #0fb4ff;
    inset: 10px;
    filter: blur(8px);
  }
  .paopao>div:nth-child(2) {
    border-right: 15px solid #ff4484;
    inset: 10px;
    filter: blur(8px);
  }
  .paopao>div:nth-child(3) {
    border-top: 15px solid #ffeb3b;
    inset: 20px;
    filter: blur(8px);
  }
  .paopao>div:nth-child(4) {
    border-left: 15px solid #ff4484;
    inset: 30px;
    filter: blur(12px);
  }
  .paopao>div:nth-child(5) {
    border-bottom: 10px solid #fff;
    inset: 10px;
    filter: blur(8px);
  }

• 画龙点睛 模拟光照在泡泡表面形成的光斑

一般被照射以后，通常会形成一大一小两个圆点，我们借助伪元素来实现这两个圆点

.paopao::before{
    content: '';
    position: absolute;
    top: 45px;
    left: 45px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background: #fff;
    z-index: 10;
    filter: blur(2px);
  }
  .paopao::after{
    content: '';
    position: absolute;
    top: 80px;
    left: 80px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: #fff;
    z-index: 10;
    filter: blur(2px);
  }

• 复制，通过伪类选择器实现不同大小的泡泡, zoom 属性是控制缩放的,与transform里的scale所带来的效果是一样的，区别就是scale可以通过transfrom-origin指定缩放的原点，而zoom则不能。

.paopao:nth-child(2n) {
    zoom: .45;
  }
  .paopao:nth-child(3n) {
    zoom: .65;
  }
  .paopao:nth-child(4n) {
    zoom: .35;
  }
  .paopao:nth-child(5n) {
    zoom: .85;
  }

• 漂浮+呼吸变换

一提到呼吸，相信看过之前文章的同学就又懂了，呼吸特效 = filter:hue-rotate ，简单的动画配合色相反相滤镜，呼吸变色真的是信手拈来

@keyframes paoEr {
    0%, 100%{
      transform: translateX(0);
      bottom: -100px;
      opacity: 1;
      filter: hue-rotate(360deg);
    }
    50%{
      transform: translateX(150px);
      opacity: .6;
      filter: hue-rotate(0deg);
    }
  }

码上掘金

老规矩 上代码！