CSS for dynamic bubble background code sharing

This article mainly and you introduced the CSS animation to achieve dynamic bubble background of the relevant data, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

Today's first task is to write a login page, the boss gave me a (Chao) test (xi) case, you can click on the link to see. Well, this login page is really concise, generous, especially its bubble background, the first reaction this should be a dynamic picture, open the review element only found that this is written in code, suddenly aroused the baby's curiosity, so also try to write a background with a bubble landing page, the effect is as follows:

Emm ... Why is uploading a GIF dynamic graph always so small to fill up:

(You can self-complement these background bubbles to rise in the picture: SOB:)

Just some simple code to achieve 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;    Fills the bubble background with the entire screen top:0;    left:0;    width:100%;    height:100%;      Li {position:absolute;      The bottom is set to create the effect of bubbles popping from the bottom of the page; bottom: -160px;      The default bubble size; width:40px;      height:40px;      Background-color:rgba (255, 255, 255, 0.15);      List-style:none;      Use custom animations to make bubbles fade, rise, and roll; Animation:square 15s Infinite;      Transition-timing-function:linear;      Each bubble is set in different positions, sizes, transparency and speed to appear layered; &: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 (Ten) {left:85%;        width:160px;        height:160px;      animation-delay:5s;        }}//Custom square animation; @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 map is complete. Looking back, it is not difficult, but also more and more people feel the charm and powerful CSS animation: relaxed:.