Speaking of "fade", what will you think of?
When I started searching for this noun, I found that it actually has two kinds of understanding or two forms: dynamic and static gradients.
The so-called dynamic gradient, for a simple example: He came, her face gradually red ... Gradually, gradually changed, is constantly changing, and static gradient, it is simpler: a Rainbow in the sky, Chinghuang ah ... In the current display of the finished product, the color from part to the other part of the color is not the same, may be small, is gradually changing, but one thing is important, it has existed, and formed a change in the status quo and can not be changed.
So we first to use JavaScript to achieve the so-called dynamic gradient, consider the dynamic reason is not on the diagram, I would like to briefly introduce the following ideas:
* Dynamic Gradient
Copy Code code as follows:
<span style= "FONT-SIZE:12PX;" >...
<body>
<center>
<div id= "Fade" style= "width:600px;height:200px;" ></div>
</center>
</body>
For easy viewing, I write inline style, or recommend the use of the chain style, ah, and then simple to write the dynamic implementation of the gradient effect:
Copy Code code 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>
So I don't have to say more, just a stitch and a recurring call to the problem.
* Static Gradient
First to the drawings, we look at the effect of the general understanding of God horse meaning.
In the absence of compatibility, the amount, the real change under the compatibility of the study, this interface is not considered compatible with a bit of a lack of ah, well, let's continue to say, I was using the WebKit kernel, the first to introduce
To add to a CSS style:
Background:-webkit-gradient (linear, 100% 0, 0% 0, from (#ffffff), Color-stop (0.5, #0000ff), to (#ffffff));
Simple explanation:
Linear: This meets the two concepts of linear and radial gradients, nothing more than the linear and radial diffusion of a circle around a single line;
The following four values: representing the PX value of the corresponding direction, can be left clockwise from the order of memory, but it represents the to, the color of the due
From: That's the color of the beginning.
To: And from is a color that appears at the same time, and the last gradient ends
And Color-stop: Is the change to the line where the color will appear, of course, from the surrounding transition past, the equivalent of from,to transition point, from transition point, to;
Well, that's a lot more than that, it comes with the simple other basic code
Copy Code code as follows:
FILTER:progid:DXImageTransform.Microsoft.Gradient (gradienttype=1,startcolorstr= #b8c4cb, endcolorstr= #f6f6f8);/* ie6*/
Background:-moz-linear-gradient (left, #ffffff, #ff0000);//other than IE6 * *
Background:-webkit-gradient (linear, 100% 0, 0% 0, from (#ff0000), to (#0000ff))/* Non-IE6 Other * *
Today I saw a episode of "Lecture", there are so good-looking shows, too lower I ....
