Home >Web Front-end >CSS Tutorial >How to create a transition gradient effect in CSS3
How to create a transition gradient effect in CSS3
- php中世界最好的语言Original
- 2017-11-24 10:46:292636browse
Everyone knows that there is a transitional gradient effect in CSS3, so this time I will share with you how to use transitional gradients and their usage skills. Here is a small example.
CSS3 gradients allow you to display smooth transitions between two or more specified colors.
-Webkit-Gradient Left/Right/Division direction
· Radial Gradients-Define by their central definition
Linear-Gradient (color 1, color 2)
Use of linear gradient:
radial-gradient
Uniform color distribution
background: -webkit-radial-gradient(red, green, blue) ;Color distribution according to percentage
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
Case list:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
#dv{
border:1px solid #000;
width:150px;
height:150px;
/*background: -webkit-radial-gradient(red, green, blue);
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);*/
background: -webkit-radial-gradient( red, yellow, green);
}
</style>
<body>
<div id="dv">
</div>
</div>
</body>
</html>There are so many ways to use transition gradients. For more exciting information, please pay attention to php Chinese website
Otherrelated articles! Related reading:
How to use absolute paths and relative paths in html##Commonly used drawing techniques for Canvas in HTML5
How to display html text vertically
The above is the detailed content of How to create a transition gradient effect in CSS3. For more information, please follow other related articles on the PHP Chinese website!