For css3 learning is more familiar with the new features and is the basic theory of this article led by a case where we understand css3 some theoretical knowledge, will sum up some tips to improve everyone's development efficiency;
The Case for (background color gradient), use css3 Beijing can achieve the effect of color gradient;
HTML part:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <Title> Gradient - Skyline </ title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="text"> Fader - Skyline </div> </body> </html>
BACKGROUND achieve color gradient does not require any operation in HTML (structure) of the line of text where the added convenience display;
CSS part:
body{ margin: 0; padding: 0; font-family: "montserrat"; background-image: linear-gradient(125deg,#E4FFCD,#6DD5FA,#2980B9,#E4FFCD); background-size: 400%; animation: bganimation 15s infinite; } .text{ color: white; text-align: center; text-transform: uppercase; margin: 400px 0; font-size: 22px; } @keyframes bganimation { 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } }
Highlights:
In the previous part of (Watermark fluctuations), and mentioned: https://www.cnblogs.com/LinWenQuan/p/11908979.html
- background-image: linear-gradient（）；
linear-gradient () function to create a linear gradient of an "image." To create a linear gradient, you need to set a starting point and a direction (specified as an angle) transition effects. You have to define the end color. End color that you want to Gecko smooth transition, and you must specify at least two, of course, will be specified more colors to create more complex gradients.
Wherein "125deg" gradual inclination angle is set;
- background-position：
- Wallpaper can also try this gradient:
background:white; background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0), linear-gradient( rgba(200,0,0,.5) 50%, transparent 0); background-size: 30px 30px;