Quando se trata de "cor gradual", o que você acha?
Quando comecei a procurar esse substantivo, descobri que ele realmente tem dois entendimentos ou duas formas: gradiente dinâmico e gradiente estático.
O chamado gradiente dinâmico, para dar um exemplo simples: quando ele vem, o rosto dela gradualmente fica vermelho ... gradualmente, as mudanças gradualmente estão mudando constantemente; Embora o gradiente estático seja ainda mais simples: quando o arco -íris vem do céu, vermelho, laranja, amarelo, verde, azul, azul, roxo ... nos produtos acabados atualmente exibidos, as cores de parte para outra são diferentes e a amplitude pode ser relativamente pequena e elas estão mudando gradualmente, mas uma coisa é crucial. Já existiu, formando um status de mudança e não pode ser mais alterado.
Dessa forma, vamos primeiro usar o JavaScript para implementar o chamado gradiente dinâmico. Se você considerar os motivos dinâmicos, não subirá a foto. Deixe -me apresentar brevemente a ideia:
* Gradiente dinâmico
A cópia do código é a seguinte:
<span style = "font-size: 12px;"> <html>
...
<Body>
<Center>
<div id = "fade"> </div>
</central>
</body>
</html> </span>
Por uma questão de conveniência de visualização, estou escrevendo um estilo incorporado ou recomendo usar estilos de link externos. Em seguida, simplesmente escreverei dinamicamente para obter efeito de gradiente:
A cópia do código é a seguinte:
<span style = "font-size: 12px;"> <script type = "text/javascript">
var node = document.getElementById ("fade");
var color = "#0000";
Var nível = 1;
window.load = function fading () {
node.style.background = cor.+Level.toString ()+Level.toString ();
nível ++;
if (nível> 16) {
ClearTimeout (desbotamento);
}outro{
setTimeout (desbotamento, 300);
}
}
<Cript> </span>
Parece que não preciso dizer mais, apenas uma emenda e uma chamada repetida.
* Gradiente estático
Vamos primeiro anexar as fotos, vamos dar uma olhada no efeito e geralmente entender o significado dos deuses.
Sem considerar a compatibilidade, hum, é compatível após a pesquisa real de modificação. Isso falta um pouco na interface sem considerar a compatibilidade. Ok, vamos continuar dizendo isso primeiro. Estou usando o kernel do webkit, então usarei isso para apresentá -lo primeiro.
Adicione o estilo CSS:
Antecedentes: -Webkit-gradiente (linear, 100% 0%, 0% 0%, de (#fffff), parada de cor (0,5,#0000FF), a (#FFFFFF));
Uma breve explicação:
Linear: Isso encontra os dois conceitos de gradiente linear e gradiente radial, que nada mais são do que alterações lineares em uma linha e difusão radial ao redor como um círculo;
Os quatro valores a seguir: respectivamente representam o valor PX na direção correspondente, que pode ser memorizada na ordem de rotação no sentido horário da esquerda, mas representa a cor que é cortada.
De: Esta é a cor do começo
para: e de aparecer ao mesmo tempo, e a cor no final do gradiente é finalmente concluída
Parada de cor: refere-se a que cor aparecerá quando mudar para onde está a linha. Obviamente, ele faz a transição da área circundante, que é equivalente a de, para o ponto de transição, do ponto de transição, para;
Ok, eu vou entender muito, e vou obter alguns outros códigos básicos simples
A cópia do código é a seguinte:
Filtro: Progid: dIXEGETRANSForm.microsoft.gradiente (gradientType = 1, startColorstr =#b8c4cb, endcolorstr =#f6f6f8);/*ie6*/
Antecedentes: -Moz-linear-gradiente (esquerda,#ffffff,#ff0000);/*outros não ie6*/
Antecedentes: -Webkit gradiente (linear, 100% 0%, 0% 0%, de (#ff0000), a (#0000ff));/*outros não ie6*/
Eu assisti a um episódio de "Speaking" hoje. Acontece que há um show tão bom. É muito menor?