En ce qui concerne la "couleur progressive", à quoi pensez-vous?
Lorsque j'ai commencé à chercher ce nom, j'ai trouvé qu'il a en fait deux compréhensions ou deux formes: gradient dynamique et gradient statique.
Le soi-disant gradient dynamique, pour donner un exemple simple: quand il vient, son visage devient progressivement rouge ... progressivement, les changements progressivement changent constamment; Bien que le gradient statique soit encore plus simple: lorsque l'arc-en-ciel vient du ciel, rouge, orange, jaune, vert, bleu, bleu, violet ... dans les produits finis actuellement affichés, les couleurs d'une partie à une autre sont différentes, et l'amplitude peut être relativement petite et ils changent progressivement, mais une chose est cruciale. Il a déjà existé, formant un statut changeant et ne peut plus être modifié.
De cette façon, utilisons d'abord JavaScript pour implémenter le soi-disant gradient dynamique. Si vous considérez les raisons dynamiques, vous ne monterez pas sur l'image. Permettez-moi de présenter brièvement l'idée:
* Gradient dynamique
La copie de code est la suivante:
<span style = "Font-Size: 12px;"> <html>
...
<body>
<Nenter>
<div id = "fade"> </div>
</ Center>
</docy>
</html> </span>
Dans un souci de commodité de la visualisation, j'écris un style intégré ou je recommande d'utiliser des styles de liens externes. Ensuite, je vais simplement écrire dynamiquement pour réaliser un effet de gradient:
La copie de code est la suivante:
<span style = "font-size: 12px;"> <script type = "text / javascript">
var node = document.getElementById ("Fade");
var color = "# 0000";
niveau var = 1;
window.load = fonction fading () {
node.style.background = couleur. + niveau.toString () + niveau.toString ();
niveau ++;
if (niveau> 16) {
ClearTimeout (décoloration);
}autre{
setTimeout (FADING, 300);
}
}
<cript> </span>
Il semble que je n'ai pas besoin d'en dire plus, juste un épissage et un appel répété.
* Gradient statique
Fixons d'abord les photos, jetons un coup d'œil à l'effet et comprenons généralement la signification des dieux.
Sans considérer la compatibilité, euh, il est compatible après des recherches de modification réelles. Il manque un peu dans l'interface sans considérer la compatibilité. D'accord, continuons à dire cela en premier. J'utilise le noyau webkit, donc je vais l'utiliser pour le présenter en premier.
Ajouter le style CSS:
Contexte: -Webkit-gradient (linéaire, 100% 0%, 0% 0%, de (#ffffff), couleurs-stop (0,5, # 0000FF), vers (#ffffff));
Une brève explication:
Linear: Cela rencontre les deux concepts de gradient linéaire et de gradient radial, qui ne sont rien de plus que des changements linéaires sur une ligne et une diffusion radiale comme un cercle;
Les quatre valeurs suivantes: représentent respectivement la valeur PX dans la direction correspondante, qui peut être mémorisée dans l'ordre de rotation dans le sens des aiguilles d'une montre à partir de la gauche, mais il représente la couleur qui est coupée.
De: c'est la couleur du début
à: et de apparaître en même temps, et la couleur à la fin du gradient est enfin terminée
Color-stop: fait référence à la couleur apparaît lorsqu'elle sera en train de passer à l'endroit où se trouve la ligne. Bien sûr, il passe de la zone environnante, qui équivaut à, à, au point de transition, du point de transition, vers;
Ok, je vais comprendre beaucoup, et j'obtiendrai d'autres codes de base simples
La copie de code est la suivante:
Filtre: PROGID: dxiageTransform.Microsoft.gradient (GradientType = 1, startColorstr = # b8c4cb, endColorstr = # f6f6f8); / * ie6 * /
Contexte: -moz-linear-gradient (gauche, # ffffff, # ff0000); / * d'autres pas ie6 * /
Contexte: -Webkit-gradient (linéaire, 100% 0%, 0% 0%, de (# ff0000), à (# 0000FF)); / * d'autres pas ie6 * /
J'ai regardé un épisode de "Speaking" aujourd'hui. Il s'avère qu'il y a un si bon spectacle. Est-ce trop inférieur?