原码笔记

原码笔记

CSS 动画实现动态气泡背景的方法

小诸哥 0

这篇文章主要介绍了CSS 动画实现动态气泡背景的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

今天是节后上班第一天,早上醒来一睁眼,嗯?啊...?什么...?这是哪?我是谁?上什么班?

然鹅,还是被昨晚特意设置的八个闹钟:alarm_clock:吵醒,冬天早上起床的难度...想必各位都心有体会 :sob:,抱着一万个不情愿起床早早地来到了办公室,还是熟悉的环境,还是熟悉的味道。。。

还有,熟悉的任务需求:joy:。

今天的第一个任务是写个登录页面,老大给了我一个参(chao)考(xi)案例,大家点击链接就能看到。嗯,这个登录页面确实很简洁、大方,尤其是它的气泡背景,第一反应这应该是张动态图片,打开审查元素才发现原来这是用代码写的,一下子激起了宝宝的好奇心,所以也试着写了一个带气泡背景的登录页面,效果如下:

emm...为什么上传的 gif 动态图总是这么小,来补张截图:

(大家可以自行脑补这些背景气泡往上升的画面 :sob:)

只需一些简单的代码就可以实现这样的效果,

首先我们先定义10个 li 列表标签,我用的是 vue 框架:

  1. <ul class="bg-bubbles">
  2.      <li v-for="(item, index) in bubbles" :key="index"></li>
  3. </ul>
  1. created() {
  2.      this.bubbles.length = 10;
  3.      },

样式是用 less 编写的:

  1. .bg-bubbles {
  2.      position: absolute;
  3.      // 使气泡背景充满整个屏幕
  4.      top: 0;
  5.      left: 0;
  6.      width: 100%;
  7.      height: 100%;
  8.      li {
  9.          position: absolute;
  10.          // bottom 的设置是为了营造出气泡从页面底部冒出的效果;
  11.          bottom: -160px;
  12.          // 默认的气泡大小;
  13.          width: 40px;
  14.          height: 40px;
  15.          background-color: rgba(255, 255, 255, 0.15);
  16.          list-style: none;
  17.          // 使用自定义动画使气泡渐现、上升和翻滚;
  18.          animation: square 15s infinite;
  19.          transition-timing-function: linear;
  20.          // 分别设置每个气泡不同的位置、大小、透明度和速度,以显得有层次感;
  21.          &:nth-child(1) {
  22.          left: 10%;
  23.          }
  24.          &:nth-child(2) {
  25.          left: 20%;
  26.          width: 90px;
  27.          height: 90px;
  28.          animation-delay: 2s;
  29.          animation-duration: 7s;
  30.          }
  31.          &:nth-child(3) {
  32.          left: 25%;
  33.          animation-delay: 4s;
  34.          }
  35.          &:nth-child(4) {
  36.          left: 40%;
  37.          width: 60px;
  38.          height: 60px;
  39.          animation-duration: 8s;
  40.          background-color: rgba(255, 255, 255, 0.3);
  41.          }
  42.          &:nth-child(5) {
  43.          left: 70%;
  44.          }
  45.          &:nth-child(6) {
  46.          left: 80%;
  47.          width: 120px;
  48.          height: 120px;
  49.          animation-delay: 3s;
  50.          background-color: rgba(255, 255, 255, 0.2);
  51.          }
  52.          &:nth-child(7) {
  53.          left: 32%;
  54.          width: 160px;
  55.          height: 160px;
  56.          animation-delay: 2s;
  57.          }
  58.          &:nth-child(8) {
  59.          left: 55%;
  60.          width: 20px;
  61.          height: 20px;
  62.          animation-delay: 4s;
  63.          animation-duration: 15s;
  64.          }
  65.          &:nth-child(9) {
  66.          left: 25%;
  67.          width: 10px;
  68.          height: 10px;
  69.          animation-delay: 2s;
  70.          animation-duration: 12s;
  71.          background-color: rgba(255, 255, 255, 0.3);
  72.          }
  73.          &:nth-child(10) {
  74.          left: 85%;
  75.          width: 160px;
  76.          height: 160px;
  77.          animation-delay: 5s;
  78.          }
  79.      }
  80.      // 自定义 square 动画;
  81.      @keyframes square {
  82.          0% {
  83.          opacity: 0.5;
  84.          transform: translateY(0px) rotate(45deg);
  85.          }
  86.          25% {
  87.          opacity: 0.75;
  88.          transform: translateY(-400px) rotate(90deg)
  89.          }
  90.          50% {
  91.          opacity: 1;
  92.          transform: translateY(-600px) rotate(135deg);
  93.          }
  94.          100% {
  95.          opacity: 0;
  96.          transform: translateY(-1000px) rotate(180deg);
  97.          }
  98.      }
  99.      }

至此,一个气泡背景图就完成了。回过头来看,确实不难,但也愈来愈让人感受到 css 动画的魅力和强大 :relaxed:。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

标签: 动画实现 气泡背景