Css3 dynamic background and css3 dynamic

Css3 dynamic background and css3 dynamic
Dynamic background

The multi-layer background is used to fade in and out alternately to achieve a non-stop background conversion effect. First, let's look at the figure. :

DEMO address

Procedure

1. Use css'sradial-gradientCreate an image gradient background. The80% 20%The x and y positions in the center of the gradient.

For more information about how to use radial-gradient, see 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 four divs with different gradient backgrounds. The positions of the gradient center are80% 20% 80% 80% 20% 80%20% 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;}

Effects of four divs

3. Place the four divs in sequence, and change the transparency of the divs from 1 to 0 and then to 1. The transparency of the last div does not need to be changed. Therefore, a div needs to be changed to three. Each div has two states, so there are six States in total. 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 in 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;  }}

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 images are changed from the display gradient to the Transparent Display in sequence.

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

4. Add a layer of tiled translucent points on the top to increase 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, ask Weibo @ UED Tianji. I will reply to the github address in a timely manner.

1. Wavy dynamic background

In CSS3 or HTML5, the background color is changed.

The content of the backgroud attribute can be dynamically changed through the pseudo-class hover or JS

To see what you want to achieve, you can refer to the CSS background attribute usage method.

Q: How does the image rotate around the center of the circle when the mouse slides over the background image? Css3 is also supported.

@-Webkit-keyframes btnRotate {0% {-webkit-transform: rotateZ (0deg);} 100% {-webkit-transform: rotateZ (360deg); }}# startMenu button: hover img {-webkit-animation: btnRotate 1.5 s linear infinite;} I tried the code above. It seems that I can only circle it.
The animation effect of css3 I used. When you move the mouse up, it will keep turning. Move the mouse away and restore it.