Maison > Article > interface Web > Organisez et partagez 5 CSS purs pour obtenir des effets de texte sympas

Organisez et partagez 5 CSS purs pour obtenir des effets de texte sympas

WBOYavant: 2022-01-13 18:19:524344parcourir

Cet article vous propose 5 effets de texte très sympas. Ces effets sont tous implémentés en utilisant CSS. J'espère que cela vous sera utile.

CSS est un langage très spécial Vous pensez que CSS ne peut être utilisé que pour contrôler la structure et le style des pages Web, mais tant que vous avez une imagination riche, vous pouvez créer des possibilités illimitées.

1. Effet de texte dégradé

Cet effet utilise principalement background-clip:text avec de la couleur pour obtenir l'effet de texte dégradé. utilisez le texte à l'intérieur de la boîte. Le texte est recadré vers l'extérieur en tant que zone de recadrage, et la zone en dehors du texte sera recadrée.

Définissez un arrière-plan dégradé pour le conteneur de texte

 background: linear-gradient(90deg, black 0%, white 50%, black 100%);

Définissez l'attribut webkit-background-clip et utilisez le texte comme zone de recadrage pour recadrer vers l'extérieur

-webkit-background-clip: text;
        background-clip: text;

Définissez l'animation via l'attribut -webkit-animation pour obtenir l'effet ci-dessus

-webkit-animation: shining 3s linear infinite;
        animation: shining 3s linear infinite;

@-webkit-keyframes shining {
  from {
    background-position: -500%;
  }
  to {
    background-position: 500%;
  }
}
@keyframes shining {
  from {
    background-position: -500%;
  }
  to {
    background-position: 500%;
  }
}

Référence de style

<html>
    <link rel="stylesheet" href="./css/neno-text-style.css">
    <body>
        <p class="neon">前端实验室</p>
    </body>
</html>

2. Effet de texte arc-en-ciel (chapiteau)

Organisez et partagez 5 CSS purs pour obtenir des effets de texte sympas

.text {
    letter-spacing: 0.2rem;
    font-size: 1.5rem;
    background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
}

Cet effet est également obtenu en utilisant background-clip:text et l'attribut de dégradé linéaire gradient-linéaire L'effet de l'arc-en-ciel. le texte est obtenu en définissant la valeur de couleur régionale.

Le texte arc-en-ciel dynamique doit définir l'attribut -webkit-animation

-webkit-animation: maskedAnimation 4s infinite linear;
@keyframes maskedAnimation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

Style CSS

.rainbow {
    letter-spacing: 0.2rem;
    font-size: 1.2rem;
    text-transform: uppercase;
}
.rainbow span {
    animation: rainbow 50s alternate infinite forwards;
}
@keyframes rainbow {
    0% {
        color: #efc68f;
    }
    ...
    100% {
        color: #8fefed;
    }
}

<html>
    <head>
        <link rel="stylesheet" href="./css/rainbow-color-text-style.css">
    </head>
    <body>
        <div class="text">【前端实验室】分享前端最新、最实用前端技术</div>
    </body>
</html>

3 Effet de texte brillant

Cet effet est principalement obtenu en utilisant le texte-. ombre attribut. La propriété text-shadow ajoute une ou plusieurs ombres au texte. Cette propriété est une liste de nuances séparées par des virgules, chaque nuance étant spécifiée avec deux ou trois valeurs de longueur et une valeur de couleur facultative.

.neon {
    color: #cce7f8;
    font-size: 2.5rem;
    -webkit-animation: shining 0.5s alternate infinite;
    animation: shining 0.5s alternate infinite;
}

@-webkit-keyframes shining {
    from {
        text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;
    }
    to {
        text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;
    }
}

<html>
    <head>
        <link rel="stylesheet" href="./css/neno-text-style.css">
    </head>
    <body>
        <p class="neon">【前端实验室】分享前端最新、最实用前端技术</p>
    </body>
</html>

IV. Effet machine à écrire

Organisez et partagez 5 CSS purs pour obtenir des effets de texte sympas

Cet effet est principalement obtenu en modifiant la largeur du conteneur. L'attribut

.typing {
    color: white;
    font-size: 2em;
    width: 21em;
    height: 1.5em;
    border-right: 1px solid transparent;
    animation: typing 2s steps(42, end), blink-caret .75s step-end infinite;
    font-family: Consolas, Monaco;
    word-break: break-all;
    overflow: hidden;
}

/* 打印效果 */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 21em;
    }
}
/* 光标 */
@keyframes blink-caret {
    from,
    to {
        border-color: transparent;
    }
    50% {
        border-color: currentColor;
    }
}

<html>
   <head>
   <link rel="stylesheet" href="./css/typing-style.css">
   </head>
   <body>
   <div class="typing">【前端实验室】分享前端最新、最实用前端技术</div>
</html>

white-space:nowrap sert principalement à garantir qu'une ligne est affichée. Compte tenu de l'affichage des lettres anglaises, cet attribut est supprimé pour garantir qu'il n'y aura pas de discontinuité de caractères.

word-break:break-all permet de présenter les caractères anglais un par un.

La fonction étapes dans l'attribut animation permet à l'animation d'être exécutée de manière intermittente plutôt que continue. La syntaxe

steps() signifie : steps(number, position), où le mot-clé number indique en combien de segments l'animation est divisée ; le mot-clé position indique si l'animation est continue depuis le début ou la fin de la période, et prend en charge le début et la fin. La signification des mots est la suivante :

start : signifie démarrer directement
fin : signifie s'arrêter brusquement, ce qui est la valeur par défaut

L'effet de curseur est obtenu grâce à simulation d'ombre de boîte. Un simple effet de machine à écrire peut être obtenu grâce aux attributs ci-dessus ~

5. Effet de texte de style Glitch

Organisez et partagez 5 CSS purs pour obtenir des effets de texte sympas

Cet effet d'animation est relativement complexe, utilisant principalement des pseudo-éléments CSS et la personnalisation des éléments Propriétés, propriétés de masque, animations , etc.

<div class="text" data-text="欢迎关注微信公众号【前端实验室】">
  欢迎关注微信公众号【前端实验室】
</div>

Ici, nous utilisons principalement des attributs personnalisés, data- plus le nom de l'attribut personnalisé, et attribuons le texte à afficher afin que le pseudo-élément puisse obtenir le texte correspondant.

@keyframes animation-before{
    0% {
        clip-path: inset(0 0 0 0);
    }
    ...
    100% {
        clip-path: inset(.62em 0 .29em 0);
    }
}
@keyframes animation-after{
      0% {
        clip-path: inset(0 0 0 0);
    }
    ...
    100% {
        clip-path: inset(.29em 0 .62em 0);
    }
}

Deux images clés sont définies ici, à savoir l'animation avant et l'animation après. La première est pour le pseudo-élément avant, et la seconde est pour le pseudo-élément après.

L'attribut clip-path est un nouveau masque d'attribut de CSS3. La valeur inset() indique que la forme du masque est un rectangle. Après avoir défini la zone d'effet du masque, définissez l'animation image par image via @keyframes. faire le masque La zone d'action change continuellement dans la direction verticale, obtenant l'effet de jitter de haut en bas.

.text{
    display: inline-block;
    font-size: 3.5em;
    font-weight: 600;
    padding: 0 4px;
    color: white;
    position: relative;
}

.text::before{
    content: attr(data-text);
    position: absolute;
    left: -2px;
    width: 100%;
    background: black;
    text-shadow:2px 0 red;
    animation: animation-before 3s infinite linear alternate-reverse;
}

.text::after{
    content: attr(data-text);
    position: absolute;
    left: 2px;
    width: 100%;
    background: black;
    text-shadow: -2px 0 blue;
    animation: animation-after 3s infinite linear alternate-reverse;
}

Enfin, nous définissons deux pseudo-éléments avant et après, les positionnons à la même position que l'élément parent, puis nous déplaçons un peu vers la gauche et la droite respectivement pour créer un effet mal aligné, puis définissons la couleur d'arrière-plan sur La même couleur que la couleur d'arrière-plan de l'élément parent est utilisée pour bloquer l'élément parent

De cette façon, une animation d'affichage de texte de style glitch parfaite peut être obtenue~

Des effets spéciaux sympas peuvent ajouter un style différent à nos pages Web , cet article Le code source de l'effet obtenu a été téléchargé sur Github. Vous pouvez l'obtenir en répondant à l'effet de texte aaa en arrière-plan du compte officiel.

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Quelle est la différence entre jsonp et ajaxArticle suivant：Quelle est la différence entre jsonp et ajax

Articles Liés

Voir plus