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

Introduction to the use of form OnSubmit and input type=image

Use .Htaccess to prevent malicious IP attacks on websites, prohibit access to specified domain names, prohibit machine crawlers, and prohibit hotlinking

Blog

CSS3 to achieve dynamic background gradient effect

Introduction to the use of form OnSubmit and input type=image

Use of Linux watch command

Linux uses shell scripts to regularly delete historical log files

Detailed explanation of two ways of Linux service management: service and systemctl

Search optimization knowledge to pay attention to in web design

Use .Htaccess to prevent malicious IP attacks on websites, prohibit access to specified domain names, prohibit machine crawlers, and prohibit hotlinking

js to create a carousel effect

When Navicat connects to MySQL, it reports 10060, 1045 errors and the location of my.ini

Div nested html without iframe

Vue+SSM realizes the preview effect of picture upload

Recommend

Pure CSS to achieve candle melting (water droplets) sample code

Mysql practical exercises simple library management system

MySQL 5.7.17 installation and configuration method graphic tutorial under win7

React's component collaborative use implementation

Vue implements the full selection function

Two ways to connect WeChat mini program to Tencent Maps

Vue+js click arrow to switch pictures

JavaScript canvas to achieve scratch lottery example

Let's learn about JavaScript object-oriented

HTML Table Tag Tutorial (47): Nested Tables

How to declare a cursor in mysql

Embed player in web page embed element autostart false invalid

JavaScript object-oriented class inheritance case explanation

Detailed explanation of Nginx+Tomcat load balancing cluster installation and configuration case

Solution for mobile browsers not supporting position: fix