css3 dynamic background_html/css_WEB-ITnose

Dynamic background

Use the alternate fade-in and fade-out of multiple layers of background to achieve the effect of a constantly changing background. See the picture first. Rendering:

DEMO address

Steps

1. Use CSS’s radial-gradient to create a mirror gradient background. 80% and 20% of them are the x, y positions of the gradient center.

The specific usage of radial-gradient can be found here

.dynbg__bg{    position: absolute;    top: 0px;    left: 0px;    width:100%;    height:100%;    background:-moz-radial-gradient(80% 20%,farthest-side, #edbf47, #D58123);    background:-webkit-radial-gradient(80% 20%,farthest-side, #edbf47, #D58123);}

Online code

2. Repeat the first step to create 4 DIVs with different gradient backgrounds. The positions of the gradient center points are 80% 20% 80% 80% 20% 80 % 20%

.dynbg__bg{    position: absolute;    top: 0px;    left: 0px;    width: 100%;    height: 100%;    background-size: 100% 100%;}.dynbg__bg1{    background:-moz-radial-gradient(80% 20%,farthest-side, #edbf47, #D58123);    background:-webkit-radial-gradient(80% 20%,farthest-side, #edbf47, #D58123);    z-index: 4;}.dynbg__bg2{    background:-moz-radial-gradient(80% 80%,farthest-side, #edbf47, #D58123);    background:-webkit-radial-gradient(80% 80%,farthest-side, #edbf47, #D58123);    z-index: 3;}.dynbg__bg3{    background:-moz-radial-gradient(20% 80%,farthest-side, #edbf47, #D58123);    background:-webkit-radial-gradient(20% 80%,farthest-side, #edbf47, #D58123);    z-index: 2;}.dynbg__bg4{    background:-moz-radial-gradient(20% 20%,farthest-side, #edbf47, #D58123);    background:-webkit-radial-gradient(20% 20%,farthest-side, #edbf47, #D58123);    z-index: 1;}

The effect of the four divs

3. Place the four divs on top of each other in order, and change the transparency of the divs from 1 to 0 and then to 1 in order. The transparency of the last div does not need to be changed, so one needs to change 3 divs. Each div changes in two states, so there are 6 states in total. We divide 100% by 6 and divide it into 0%, 16.6667%, 33.3333%, 50%, 66.6667%, 83.3333%, and 100%. The status of each div at different stages is as follows.

@-webkit-keyframes dynbg__ani1{  0%{    opacity: 1;  }  16.6667%{    opacity: 0;  }  33.3333%{    opacity: 0;  }  50%{    opacity: 0;  }  66.6667%{    opacity: 0;  }  83.3333%{    opacity: 0;  }  100%{    opacity: 1;  }}@-webkit-keyframes dynbg__ani2{  0%{    opacity: 1;  }  16.6667%{    opacity: 1;  }  33.3333%{    opacity: 0;  }  50%{    opacity: 0;  }  66.6667%{    opacity: 0;  }  83.3333%{    opacity: 1;  }  100%{    opacity: 1;  }}@-webkit-keyframes dynbg__ani3{  0%{    opacity: 1;  }  16.6667%{    opacity: 1;  }  33.3333%{    opacity: 1;  }  50%{    opacity: 0;  }  66.6667%{    opacity: 1;  }  83.3333%{    opacity: 1;  }  100%{    opacity: 1;  }}

Then add the animation attribute to the div class

.dynbg__bg{  ...  -webkit-transition:all 1s linear;  -moz-transition:all 1s linear;  ...}.dynbg__bg1{  ...  -webkit-animation:dynbg__ani1 infinite 8s;  -moz-animation:dynbg__ani1 infinite 8s;}.dynbg__bg2{  ...  -webkit-animation:dynbg__ani2 infinite 8s;  -moz-animation:dynbg__ani2 infinite 8s;}.dynbg__bg3{  ...  -webkit-animation:dynbg__ani3 infinite 8s;  -moz-animation:dynbg__ani3 infinite 8s;}.dynbg__bg4{  ...}

In this way, the three pictures will be displayed in sequence. It becomes transparent and then changes back to display.

For how to use transition, please refer here
For how to use animation, please refer here

4. Finally, add a layer of tiled translucency on top points to add texture.

.dynbg__bg0{    background-repeat: repeat;    background: -webkit-radial-gradient(rgba(255,255,255,0.4) 5%, transparent 10%);    background: -moz-radial-gradient(rgba(255,255,255,0.4) 5%, transparent 10%);    background-size: 16px 16px;    z-index: 5;}

Online code

If you have any questions or suggestions, please tweet @UED天记. I will reply promptly

github address

Related reading

1. Wavy dynamic background