CSS3 Fade Effect
a {
float: left;
width: 32px;
height: 32px;
text-align: left;
text-indent:-9999px;
background: url('../img/button.png') no-repeat 0 0;
-webkit-transition: background 300ms ease-in 2s; /* property duration timing-function delay */
-moz-transition: background 300ms ease-in 2s;
-o-transition: background 300ms ease-in 2s;
transition: background 300ms ease-in 2s;
-webkit-transition-property: background;
-webkit-transition-duration: 300ms;
-webkit-transition-timing-function: ease-in;
-webkit-transition-delay: 100ms;
-moz-transition-property: background;
-moz-transition-duration: 300ms;
-moz-transition-timing-function: ease-in;
-moz-transition-delay: 100ms;
-o-transition-property: background;
-o-transition-duration: 300ms;
-o-transition-timing-function: ease-in;
-o-transition-delay: 100ms;
transition-property: background;
transition-duration: 300ms;
transition-timing-function: ease-in;
transition-delay: 100ms;
}
a:hover {
background:position: 0 -32px;
}
.. actuellement il a faites défiler vers le haut/par le bas, mais je veux que le fond de modifier avec effet de fondu, que dois-je changer dans le CSS?
Merci!
source d'informationauteur 3zzy
Vous devez vous connecter pour publier un commentaire.
Vous ne pouvez pas de transition entre deux images d'arrière-plan, comme il n'y a aucun moyen pour le navigateur pour savoir ce que vous voulez pour interpoler. Comme vous l'avez découvert, vous pouvez passer au fond. Si vous voulez que l'image fondu sur le dessus de la souris, je pense que la meilleure façon de le faire avec les transitions CSS est de mettre l'image sur un élément contenant et puis d'animer la couleur du fond et transparent sur le lien lui-même:
L'effet de défilement est cause en spécifiant le générique de "toile de fond" de la propriété dans votre css à la place de celui, plus spécifique, background-image. En définissant la propriété de l'arrière plan, l'animation de transition entre toutes les propriétés.. Background-Color, Background-Image, Background-Position.. Etc provoquant Ainsi l'effet de défilement..
E. g.
C'est possible, utilisez la structure ci-dessous:
etc...
Où la
<li>
contient un<a>
balise d'ancrage qui contient une plage comme indiqué ci-dessus. Ensuite, insérez le code css suivant:position: relative;
<a>
tag unheight
width
<span>
width
&height
à 100%, de sorte que les deux<a>
et<span>
ont les mêmes dimensions<a>
et<span>
obtenirposition: relative;
.<a>
tag aura le "OFF"background-position
et la<span>
aura lebackground-poisiton
.<span>
:hover
utilisation de l'état d'opacité 1 pour<span>
-webkit
ou-moz
de transition sur le<span>
élémentVous aurez la possibilité d'utiliser l'effet de transition tout en encore défaut à l'ancien
background-position
swap. N'oubliez pas d'insérer IE alpha filtre.