CSS fondu de gauche à droite
Est-il un moyen pour estomper les éléments (au moins juste le texte) et de sortir de gauche à droite ou vice-versa en utilisant uniquement CSS?
Voici un exemple de ce que je veux dire:
En fait, si elle nécessite jQuery, je vais accepter que trop, tout comme une deuxième priorité.
Vous pouvez utiliser une couche supplémentaire à la tenue d'un gradient (du blanc au transparent) et déplacer ce calque à l'horizontale pour obtenir l'effet désiré.
C'est ce que je pensais peut-être mieux fonctionner, mais je n'étais pas sûr de savoir comment obtenir l'effet ci-dessus, puisque la couche voudrais juste revenir en arrière au lieu de continuer à aller dans la même direction.
Placez une couche au-dessus du texte et de l'animation d'un dégradé? Cela pourrait fonctionner, cependant, il a été un long temps depuis que j'ai utilisé dégradés CSS3.
Si quelque chose, il ne serait qu'un PNG comme Geuis dit, pas un CSS3 gradient. Je peux le faire facilement, mais le truc c'est de faire le calque de voyage dans la même direction sur la souris. À moins que...je viens de faire un calque d'une image-objet avec une inversion de gradient ci-dessous et bouger l'arrière-plan en haut et en bas sur le vol stationnaire et de la souris.
Il n'y a actuellement aucun moyen d'animer les dégradés en CSS3. Peut-être dans le futur...
C'est ce que je pensais peut-être mieux fonctionner, mais je n'étais pas sûr de savoir comment obtenir l'effet ci-dessus, puisque la couche voudrais juste revenir en arrière au lieu de continuer à aller dans la même direction.
Placez une couche au-dessus du texte et de l'animation d'un dégradé? Cela pourrait fonctionner, cependant, il a été un long temps depuis que j'ai utilisé dégradés CSS3.
Si quelque chose, il ne serait qu'un PNG comme Geuis dit, pas un CSS3 gradient. Je peux le faire facilement, mais le truc c'est de faire le calque de voyage dans la même direction sur la souris. À moins que...je viens de faire un calque d'une image-objet avec une inversion de gradient ci-dessous et bouger l'arrière-plan en haut et en bas sur le vol stationnaire et de la souris.
Il n'y a actuellement aucun moyen d'animer les dégradés en CSS3. Peut-être dans le futur...
OriginalL'auteur Bobe | 2012-10-02
Vous devez vous connecter pour publier un commentaire.
Dans photoshop ou autre logiciel de retouche d'image, de créer une zone circulaire qui est transparent dans le milieu et sur les côtés du fondu de solide blanc. Hésitez pas à recadrer le haut/bas en tant que de besoin. Vous pouvez ensuite utiliser les transitions css pour animer le graphique de gauche à droite pour obtenir l'effet dans votre démonstration. Pour les navigateurs comme IE qui ne prennent pas en charge les transitions, l'utilisation de la cssHooks fonction de jquery pour effectuer des animations avec jQuery.
Vous pourrait créer cet effet à l'aide des gradients css, mais vous exécuter dans le navigateur de problèmes de support et à l'aide de transitions sur des gradients css est très mauvais en termes de performances. Cependant, il suffit de l'animation d'un png24 est très facile et fait le même effet.
OriginalL'auteur Geuis