When it comes to "gradual color", what do you think of?
When I started searching for this noun, I found that it actually has two understandings or two forms: dynamic gradient and static gradient.
The so-called dynamic gradient, to give a simple example: when he comes, her face gradually turns red... Gradually, gradually changes are constantly changing; while static gradient is even simpler: when the rainbow comes from the sky, red, orange, yellow, green, blue, blue, purple... In the finished products currently displayed, the colors from part to another are different, and the amplitude may be relatively small, and they are gradually changing, but one thing is crucial. It has already existed, forming a changing status and cannot be changed any more.
In this way, let’s first use javascript to implement the so-called dynamic gradient. If you consider the dynamic reasons, you won’t go up the picture. Let me briefly introduce the idea:
* Dynamic gradient
The code copy is as follows:
<span style="font-size:12px;"><html>
...
<body>
<center>
<div id="fade"></div>
</center>
</body>
</html></span>
For the sake of convenience of viewing, I am writing an embedded style, or recommending using external link styles. Next, I will simply write dynamically to achieve gradient effect:
The code copy is as follows:
<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>
It seems that I don’t need to say more, just a splicing and a repeated call.
* Static gradient
Let’s first attach the pictures, let’s take a look at the effect and generally understand the meaning of the gods.
Without considering compatibility, um, it is compatible after real modification research. This is a bit lacking in the interface without considering compatibility. Okay, let's continue to say this first. I am using the webkit kernel, so I will use this to introduce it first.
Add in css style:
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffff),color-stop(0.5,#0000ff),to(#ffffff));
A brief explanation:
linear: This encounters the two concepts of linear gradient and radial gradient, which are nothing more than linear changes on a line and radial diffusing around like a circle;
The following four values: respectively represent the px value in the corresponding direction, which can be memorized in the order of rotation clockwise from the left, but it represents to, the color that is cut off.
from: This is the color of the beginning
to: and from appear at the same time, and the color at the end of the gradient is finally completed
color-stop: refers to what color will appear when it changes to where the line is. Of course, it transitions from the surrounding area, which is equivalent to from, to transition point, from transition point, to;
OK, I'll understand a lot, and I'll get some simple other basic codes
The code copy is as follows:
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#b8c4cb,endColorStr=#f6f6f8);/*IE6*/
background:-moz-linear-gradient(left,#ffffff,#ff0000);/*Others not IE6*/
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ff0000), to(#0000ff));/*Others not IE6*/
I watched an episode of "Speaking" today. It turns out that there is such a good show. Is it too lower?