CSS3 to achieve dynamic background gradient effect

Learning CSS3 is more about getting familiar with new features and basic theories. This article uses a case study to help you understand some theoretical knowledge in CSS3 and summarizes some techniques to improve your development efficiency.

This case is (background color gradient), using CSS3 can achieve the effect of background 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">
      Gradient - Skyline</div>
</body>
</html>

To achieve background color gradient, you don’t need to do anything in the HTML (structure) part. Here is a line of text to facilitate the display effect;

CSS part:

body{
  margin: 0;
  padding: 0;
  font-family: "montserrat";
  background-image: linear-gradient(125deg,#E4FFCD,#6DD5FA,#2980B9,#E4FFCD); background-size: 400%;
  animation: start animation 15s infinite;
}

.text{
  color: white;
  text-align: center;
  text-transform:uppercase;
  margin: 400px 0;
  font-size: 22px;
}

@keyframes startimation {
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

Key points:

Some of the content has been mentioned in the previous (water ripples): https://www.jb51.net/css/672226.html

background-image: linear-gradient（）；

The linear-gradient() function is used to create a linear gradient "image". To create a linear gradient, you need to set a starting point and a direction (specified as an angle) for the gradient to move. You also need to define the end color. The end color is what you want Gecko to transition to smoothly, and you must specify at least two, although you can specify more colors to create more complex gradient effects.

The "125deg" is used to set the gradient tilt angle;

background-position：

Property sets the starting position of the background image.

You can also try this wallpaper 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;

Summarize

The above is the CSS3 that I introduced to you to achieve the dynamic gradient effect of the background. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: 4 principles for clean and beautiful web design

>>: About the IE label LI text wrapping problem

Simple implementation of html hiding scroll bar

Solution to the problem that a line is left blank for no reason on the utf8-encoded page under IE and the utf8 page cannot be displayed

The reason is that all files are encoded in utf8. ...

CSS3 to achieve dynamic background gradient effect

Simple implementation of html hiding scroll bar

Summary of MySQL database and table sharding

Detailed explanation of important cascading concepts in CSS

How to place large images in a small space on a web page

Detailed explanation of the properties and functions of Vuex

The main idea of dynamically setting routing permissions in Vue

Detailed explanation of Nginx regular expressions

Vue implements interface sliding effect

Vue's Render function

CSS element hiding principle and display:none and visibility:hidden

Recommend

Security considerations for Windows server management

jQuery realizes the shuttle box function

A brief talk about JavaScript variable promotion

A brief discussion on the solution to the problem of native page compatibility with IE9

Detailed installation tutorial of mysql 5.7.11 under Win7 system

Download and install VSCode on Linux and use programming to output the current time

Solution to the problem that a line is left blank for no reason on the utf8-encoded page under IE and the utf8 page cannot be displayed

How to inherit CSS line-height

CSS--overflow:hidden in project examples

What is the use of the enctype field when uploading files?

vue dynamic component

25 Ways and Tips to Increase Web Page Loading Speed

Multiple ways to implement two-column layout with fixed width on the left and adaptive width on the right using CSS

html a link tag title attribute line break mouse hover prompt content line break effect

Install MySQL 5.7.18 using rpm package under CentOS 7