Home > Web Front-end > HTML Tutorial > css3 dynamic background_html/css_WEB-ITnose

css3 dynamic background_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:54:46
Original
1170 people have browsed it

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);}
Copy after login


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;}
Copy after login

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;  }}
Copy after login

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{  ...}
Copy after login

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;}
Copy after login


Online code

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

github address

Related reading

1. Wavy dynamic background

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template