CSS realizes dynamic bubble background code sharing

This article mainly introduces to you the relevant information on the method of realizing dynamic bubble background with CSS animation. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

The first task today is to write a login page. The boss gave me a reference (chao) test (xi) case. You can see it by clicking the link. Well, this login page is indeed very concise and elegant, especially its bubble background. The first thought was that this should be a dynamic picture. After opening the review element, I discovered that it was written in code, which suddenly aroused the baby's curiosity. , so I also tried to write a login page with a bubble background. The effect is as follows:

emm...Why are the uploaded gif animations always so small? Screenshot:

#(You can imagine the picture of these background bubbles rising by yourself:sob:)

You can achieve it with just some simple codes For this effect,

First we define 10 li list tags. I use the vue framework:

<ul class="bg-bubbles">
    <li v-for="(item, index) in bubbles" :key="index"></li>
</ul>

created() {
    this.bubbles.length = 10;
 },

The style is written in less:

.bg-bubbles {
    position: absolute;
    // 使气泡背景充满整个屏幕
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    li {
      position: absolute;
      // bottom 的设置是为了营造出气泡从页面底部冒出的效果；
      bottom: -160px;
      // 默认的气泡大小；
      width: 40px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.15);
      list-style: none;
      // 使用自定义动画使气泡渐现、上升和翻滚；
      animation: square 15s infinite;
      transition-timing-function: linear;
      // 分别设置每个气泡不同的位置、大小、透明度和速度，以显得有层次感；
      &:nth-child(1) {
        left: 10%;
      }
      &:nth-child(2) {
        left: 20%;
        width: 90px;
        height: 90px;
        animation-delay: 2s;
        animation-duration: 7s;
      }
      &:nth-child(3) {
        left: 25%;
        animation-delay: 4s;
      }
      &:nth-child(4) {
        left: 40%;
        width: 60px;
        height: 60px;
        animation-duration: 8s;
        background-color: rgba(255, 255, 255, 0.3);
      }
      &:nth-child(5) {
        left: 70%;
      }
      &:nth-child(6) {
        left: 80%;
        width: 120px;
        height: 120px;
        animation-delay: 3s;
        background-color: rgba(255, 255, 255, 0.2);
      }
      &:nth-child(7) {
        left: 32%;
        width: 160px;
        height: 160px;
        animation-delay: 2s;
      }
      &:nth-child(8) {
        left: 55%;
        width: 20px;
        height: 20px;
        animation-delay: 4s;
        animation-duration: 15s;
      }
      &:nth-child(9) {
        left: 25%;
        width: 10px;
        height: 10px;
        animation-delay: 2s;
        animation-duration: 12s;
        background-color: rgba(255, 255, 255, 0.3);
      }
      &:nth-child(10) {
        left: 85%;
        width: 160px;
        height: 160px;
        animation-delay: 5s;
      }
    }
    // 自定义 square 动画；
    @keyframes square {
      0% {
        opacity: 0.5;
        transform: translateY(0px) rotate(45deg);
      }
      25% {
        opacity: 0.75;
        transform: translateY(-400px) rotate(90deg)
      }
      50% {
        opacity: 1;
        transform: translateY(-600px) rotate(135deg);
      }
      100% {
        opacity: 0;
        transform: translateY(-1000px) rotate(180deg);
      }
    }
  }

At this point, a bubble background image is completed. Looking back, it is indeed not difficult, but more and more people feel the charm and power of CSS animation :relaxed:.

Related recommendations:

Photoshop CS5 Variety Brush Tutorial: Fantasy Bubble Background

How to use button trigger to achieve background color Flicker

CSS implementation of adaptive full-screen web page background image

The above is the detailed content of CSS realizes dynamic bubble background code sharing. For more information, please follow other related articles on the PHP Chinese website!