Maison > interface Web > tutoriel CSS > CSS3 obtient un effet de ligne ondulée de texte

CSS3 obtient un effet de ligne ondulée de texte

高洛峰
Libérer: 2017-03-01 15:24:04
original
1955 Les gens l'ont consulté

Avant-propos

La conception ingénieuse et la mise en œuvre exquise du CSS, si vous y réfléchissez bien, c'est extraordinaire et merveilleux. Cette ligne ondulée utilise intelligemment l'attribut de dégradé linéaire pour intégrer l'angle, la couleur et la position avec la taille d'arrière-plan et la répétition d'arrière-plan, elle transforme un en plusieurs et effectue une transition en douceur. Wow, l'effet final est tellement intelligent ! Il n'y a pas de mots pour le décrire...

Méthode de mise en œuvre

Syntaxe : linéaire-gradient(direction, couleur-arrêt 1, arrêt de couleur 2,...)

CSS3 obtient un effet de ligne ondulée de texte
Utilisation simple : image d'arrière-plan : dégradé linéaire (rouge, transparent);

CSS3 obtient un effet de ligne ondulée de texte

Ajouter un angle, dégradé linéaire (45 degrés, rouge, transparent)

CSS3 obtient un effet de ligne ondulée de texte

Ajouter une position : dégradé linéaire (45 degrés, rouge, transparent 45 %)

CSS3 obtient un effet de ligne ondulée de texte

Ajouter un dégradé linéaire de couleur (45deg, rouge, transparent 45%,rouge)
Je me demande si tout le monde a une révélation après avoir vu ça.

CSS3 obtient un effet de ligne ondulée de texte
dégradé linéaire (45deg, transparent 45%, rouge 55%, transparent 60%)

CSS3 obtient un effet de ligne ondulée de texte

gradient linéaire (135deg , transparent 45%, rouge 55%, transparent 60%)

Combinez ces deux lignes.

CSS3 obtient un effet de ligne ondulée de texte
Combiné avec

En voyant cela, savez-vous comment obtenir l'effet ligne ondulée ? ^_^

CSS3 obtient un effet de ligne ondulée de texte
La hauteur est 1/2 de la valeur originale

Code final :

CSS3 obtient un effet de ligne ondulée de texte
Texte effet de ligne ondulée

Résumé

D'accord, c'est tout ce qui précède est tout le contenu de cet article, j'espère que cela aidera tout le monde à apprendre. ou utilisez CSS3 Cela peut être utile. Si vous avez des questions, vous pouvez laisser un message pour communiquer.

Pour plus d'articles liés à CSS3 réalisant un effet de ligne ondulée de texte, veuillez faire attention au site Web PHP chinois !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal