Cuando se trata de "color gradual", ¿en qué piensas?
Cuando comencé a buscar este sustantivo, descubrí que en realidad tiene dos entendimientos o dos formas: gradiente dinámico y gradiente estático.
El llamado gradiente dinámico, para dar un ejemplo simple: cuando viene, su cara gradualmente se vuelve roja ... gradualmente, los cambios gradualmente cambian constantemente; Si bien el gradiente estático es aún más simple: cuando el arco iris proviene del cielo, rojo, naranja, amarillo, verde, azul, azul, púrpura ... en los productos terminados actualmente exhibidos, los colores de parte a otro son diferentes, y la amplitud puede ser relativamente pequeña, y están cambiando gradualmente, pero una cosa es crucial. Ya ha existido, formando un estado cambiante y ya no se puede cambiar.
De esta manera, usemos por primera vez JavaScript para implementar el llamado gradiente dinámico. Si considera las razones dinámicas, no tomará la imagen. Permítanme presentar brevemente la idea:
* Gradiente dinámico
La copia del código es la siguiente:
<span style = "font-size: 12px;"> <html>
...
<Body>
<centro>
<div id = "fade"> </div>
</Center>
</body>
</html> </span>
En aras de la conveniencia de ver, estoy escribiendo un estilo integrado o recomiendo usar estilos de enlace externos. A continuación, simplemente escribiré dinámicamente para lograr el efecto de gradiente:
La copia del código es la siguiente:
<span style = "font-size: 12px;"> <script type = "text/javaScript">
var nodo = document.getElementById ("Fade");
var color = "#0000";
nivel var = 1;
window.load = function fading () {
node.style.background = color.+nivel.toString ()+nivel.toString ();
nivel ++;
if (nivel> 16) {
ClearTimeOut (desvanecimiento);
}demás{
setTimeOut (desvanecimiento, 300);
}
}
<script> </span>
Parece que no necesito decir más, solo un empalme y una llamada repetida.
* Gradiente estático
Primero adjuntemos las fotos, echemos un vistazo al efecto y, en general, entendamos el significado de los dioses.
Sin considerar la compatibilidad, UM, es compatible después de la investigación de modificación real. Esto falta un poco en la interfaz sin considerar la compatibilidad. Bien, sigamos diciendo esto primero. Estoy usando el kernel webkit, así que lo usaré para presentarlo primero.
Agregue el estilo CSS:
Antecedentes: -CeBKit-Gradiente (lineal, 100% 0%, 0% 0%, de (#ffffff), color-stop (0.5,#0000ff), a (#ffffff));
Una breve explicación:
Lineal: esto encuentra los dos conceptos de gradiente lineal y gradiente radial, que no son más que cambios lineales en una línea y la difusión radial alrededor de un círculo;
Los siguientes cuatro valores: representan respectivamente el valor PX en la dirección correspondiente, que puede memorizarse en el orden de rotación en sentido horario desde la izquierda, pero representa el color que se corta.
De: este es el color del comienzo
a: y de aparecer al mismo tiempo, y el color al final del gradiente finalmente se completa
Color-stop: se refiere a qué color aparecerá cuando cambie a donde está la línea. Por supuesto, se transforma del área circundante, que es equivalente desde, hasta el punto de transición, desde el punto de transición, a;
Ok, entenderé mucho y obtendré algunos otros códigos básicos simples
La copia del código es la siguiente:
Filtro: progid: dximagetransform.microsoft.gradient (gradiente de inicio = 1, startColorstr =#b8c4cb, endcolorstr =#f6f6f8);/*ie6*/
Antecedentes: -Moz-lineal-gradiente (izquierda,#ffffff,#ff0000);/*Otros no ie6*/
Antecedentes: -Webkit-gradiente (lineal, 100% 0%, 0% 0%, de (#FF0000), a (#0000ff));/*Otros no IE6*/
Vi un episodio de "Speaking" hoy. Resulta que hay un buen espectáculo. ¿Es demasiado más bajo?