我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

前言

大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟

开开心心学技术大法~~

来了来了，他真的来了~

正文

先看下效果

气泡上浮背景效果

实现思路

先实现一个线性渐变的背景，可以通过background-image来实现
再实现气泡样式，只需要借助border、box-shadow、border-radius
再来就是每个气泡的动画
- 因为气泡需要有移动，因此需要设置position定位，改变bottom或top，或者translateX也可以，这里用bottom和translateX来实现
- 动画可以通过animation来定义，动画主要包括气泡移动轨迹和气泡透明度
- 透明度可以通过opacity的1到0来实现
- 具体气泡移动轨迹
  - 每个气泡出现的时机不同，可以通过animation-delay来施加不同的延迟来实现
  - 每个气泡上浮速度不同，可以通过animation-duration的不同动画时长来实现
  - 每个气泡的左右摇摆幅度不同，可以通过translateX来实现，当然，因为是纯css来实现，就没法用随机length来规定translateX的偏移距离了(不要说scss或less，因为他们本质上也是js)
  - 气泡上浮，因此需要动画改变bottom，可以从页面以下到页面最上端，从-100px到100%

具体实现

基础html

基础html结构，假设有十个气泡

<div class="kuang">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>

背景样式

.kuang{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background-image: linear-gradient(180deg,rgb(78, 168, 241),rgb(37, 91, 241));

}

气泡样式

.bubble{
  position: absolute;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: inset 0 0 8px  #fff;
  animation: flutter 10s infinite;
  opacity: 0;
}

气泡动画

@keyframes flutter {
  0%{
    transform: translateX(0);
    bottom: -100px;
    opacity: 1;
  }
  50%{
    transform: translateX(100px);
    opacity: 0.5;
  }


  100%{
    transform: translateX(0px);
    bottom: 100%;
    opacity: 0;

  }
}

单独气泡单独指定移动轨迹

.bubble:nth-child(1){
  left: -10%;
  width: 50px;
  height: 50px; 
  animation-duration: 9s;
  animation-delay: 0.1s;
}
.bubble:nth-child(2){
  left: 15%;
  width: 20px;
  height: 20px;
  animation-duration: 6s;
  animation-delay: 1.5s;
}
// 等等。。

完整代码

拓展思考

通过以上的实现，我们知道每个气泡的移动轨迹都是固定的，如果要实现不同移动轨迹，不同动画延迟和动画速度，则需要通过js来动态调节

感兴趣的兄弟可以自己尝试下

结语

如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~

学习自老哥北极光之夜，感兴趣的可以去了解下。

文章如有错误或不严谨之处，还望指出，感谢感谢！！！

加油！

往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」

纯css实现气泡上浮背景

前言

正文