Pure js and CSS gradients include static gradients and dynamic gradients
- 2020-03-30 03:09:25
- OfStack
What comes to mind when you say "gradient"?
When I started searching for the term, I realized that it actually has two interpretations or two forms: dynamic gradients and static gradients.
A simple example of a dynamic gradient is when he arrives and her face turns red... Gradually, gradually changed, is constantly changing; And static gradient, also more simple: the sky as soon as the rainbow, red orange yellow green cyan blue purple ah... In the finished product currently on display, the color varies from one part to another, possibly in a small range, and gradually changes, but it is crucial that it is already there, creating a status quo of change that cannot be changed.
In this way, we will first use javascript to achieve the so-called dynamic gradient, considering the dynamic reasons, not the figure, I will briefly introduce the idea:
* dynamic gradient
In order to facilitate the view, I wrote the inline style, or recommend the use of the outer chain style, the next simple writing dynamic gradient effect:
So I don't have to say much more, just a splice and a repeat call.
* static gradient
Let's look at the pictures and see what they mean.
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405291541275.gif? 2014429154143 ">
Under the premise of not considering the compatibility, er, really change research compatibility, this makes the interface not considering the compatibility a little bit lack ah, ok, so let's continue, I'm using the webkit kernel, let's first use this to introduce
Add:
Background :-webkit-gradient(linear, 100% 0%, 0% 0%, from(# FFFFFF),color-stop(0.5,#0000ff),to(# FFFFFF));
A brief explanation:
Linear: this meets the concepts of linear gradient and radial gradient, which are linear changes in a line and radial diffusion like a circle.
The last four values: px in the corresponding direction, can be remembered from the left clockwise order, but it represents to, the color of the end
From: this is the starting color
To: and from are the colors that appear at the same time
Color -stop: refers to what color will appear when changing to the position of the line.
Okay, so that makes sense, and I'll just throw in some simple other basic code
Today, I watched an episode of "the beginning of the talk". There is such a good program in the past. Is it too lower?
When I started searching for the term, I realized that it actually has two interpretations or two forms: dynamic gradients and static gradients.
A simple example of a dynamic gradient is when he arrives and her face turns red... Gradually, gradually changed, is constantly changing; And static gradient, also more simple: the sky as soon as the rainbow, red orange yellow green cyan blue purple ah... In the finished product currently on display, the color varies from one part to another, possibly in a small range, and gradually changes, but it is crucial that it is already there, creating a status quo of change that cannot be changed.
In this way, we will first use javascript to achieve the so-called dynamic gradient, considering the dynamic reasons, not the figure, I will briefly introduce the idea:
* dynamic gradient
<span style="font-size:12px;"><html>
...
<body>
<center>
<div id="fade" style="width:600px;height:200px;"></div>
</center>
</body>
</html></span>
In order to facilitate the view, I wrote the inline style, or recommend the use of the outer chain style, the next simple writing dynamic gradient effect:
<span style="font-size:12px;"><script type="text/javascript">
var node=document.getElementById("fade");
var color="#0000";
var level=1;
window.load=function fading(){
node.style.background=color.+level.toString()+level.toString();
level++;
if(level>16){
clearTimeOut(fading);
}else{
setTimeOut(fading,300);
}
}
<script></span>
So I don't have to say much more, just a splice and a repeat call.
* static gradient
Let's look at the pictures and see what they mean.
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405291541275.gif? 2014429154143 ">
Under the premise of not considering the compatibility, er, really change research compatibility, this makes the interface not considering the compatibility a little bit lack ah, ok, so let's continue, I'm using the webkit kernel, let's first use this to introduce
Add:
Background :-webkit-gradient(linear, 100% 0%, 0% 0%, from(# FFFFFF),color-stop(0.5,#0000ff),to(# FFFFFF));
A brief explanation:
Linear: this meets the concepts of linear gradient and radial gradient, which are linear changes in a line and radial diffusion like a circle.
The last four values: px in the corresponding direction, can be remembered from the left clockwise order, but it represents to, the color of the end
From: this is the starting color
To: and from are the colors that appear at the same time
Color -stop: refers to what color will appear when changing to the position of the line.
Okay, so that makes sense, and I'll just throw in some simple other basic code
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#b8c4cb,endColorStr=#f6f6f8);
background:-moz-linear-gradient(left,#ffffff,#ff0000);
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ff0000), to(#0000ff));
Today, I watched an episode of "the beginning of the talk". There is such a good program in the past. Is it too lower?