5 つの純粋な CSS を整理して共有し、クールなテキスト効果を実現します-フロントエンドQ&A-php.cn

5 つの純粋な CSS を整理して共有し、クールなテキスト効果を実現します

WBOY

リリース： 2022-01-13 18:19:52

転載

4361 人が閲覧しました

この記事では、非常にクールなテキスト効果を 5 つ紹介します。これらの効果はすべて CSS を使用して実装されています。皆様のお役に立てれば幸いです。

5 つの純粋な CSS を整理して共有し、クールなテキスト効果を実現します

CSS は非常に特別な言語です。CSS は Web ページの構造とスタイルを制御するためにのみ使用できると考えていますが、豊かな想像力があれば、次のようなことができます。無限の可能性を創造します。

#1. グラデーションテキスト効果

## これこの効果は主に、background-clip: テキストと色を組み合わせて、グラデーションテキスト効果を実現します。まず、background-clip: text; の意味を理解してください。ボックス内のテキストをトリミングエリアとして使用して外側をトリミングし、その外側の領域をトリミングします。テキストが切り取られます。

テキストコンテナのグラデーション背景を設定します

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

ログイン後にコピー

webkit-background-clip プロパティを設定し、テキストをトリミング領域として使用して外側を切り抜きます

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

ログイン後にコピー

アニメーションを設定します-webkit-animation プロパティを使用すると、上記の効果を実現できます

-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%;
  }
}

ログイン後にコピー

スタイルリファレンス

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

ログイン後にコピー

2. レインボーテキスト効果 (マーキー)

5 つの純粋な CSS を整理して共有し、クールなテキスト効果を実現します

.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%;
}

ログイン後にコピー

この効果は、background-clip:text と線形グラデーション属性 Linear-gradient を使用しても実現されます。虹のテキスト効果は、地域の色の値を設定することによって実現されます。

動的なレインボーテキストには -webkit-animation 属性を設定する必要があります

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

ログイン後にコピー

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. 光るテキスト効果

## この効果は主に text-shadow 属性を使用して実現されます。 text-shadow プロパティは、テキストに 1 つ以上の影を追加します。このプロパティは、シェードのカンマ区切りのリストで、各シェードは 2 つまたは 3 つの長さの値とオプションの色の値で指定されます。

.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>

ログイン後にコピー

4. タイプライター効果

5 つの純粋な CSS を整理して共有し、クールなテキスト効果を実現しますこの効果は主にコンテナの幅を変更することによって実現されます。。

.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 属性は主に一行表示を保証するためのものですが、英文字の表示を考慮して文字が途切れないようにこの属性を削除しています。

word-break:break-all を使用すると、英語の文字を 1 つずつ表示できます。

アニメーション属性のステップ関数を使用すると、アニメーションを連続的ではなく断続的に実行できます。

steps() の構文は、steps(number,position) で、number キーワードはアニメーションが何セグメントに分割されるかを示し、position キーワードはアニメーションが最初から最後まで連続しているかどうかを示します。期間、start と end のサポート 2 つのキーワードは次の意味を持ちます:

5. フォールトスタイルのテキスト効果

# アニメーション効果は比較的複雑で、主に CSS 疑似要素、要素のカスタム属性、マスク属性、アニメーションアニメーションなどを使用します。 5 つの純粋な CSS を整理して共有し、クールなテキスト効果を実現します

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

ログイン後にコピー

ここでは主にカスタム属性が使用されます。data- にカスタム属性名を加えたものです。表示するテキストは、対応するテキストを取得するために擬似要素に割り当てられます。

@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);
    }
}

ログイン後にコピー

ここでは、アニメーション前とアニメーション後という 2 つのキーフレームを設定します。前者は前疑似要素用、後者は後疑似要素用です。

クリップパス属性は、CSS3 の新しいプロパティマスクです。inset() 値は、マスクの形状が長方形であることを示します。マスクのエフェクト領域を定義した後、フレームごとのアニメーションを設定しますマスクの効果範囲を垂直方向に変更して、上下のジッターの効果を実現します。

.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;
}

ログイン後にコピー

最後に、前後に 2 つの疑似要素を設定し、親要素と同じ位置に配置し、それぞれ左右に少し移動して位置がずれた効果を作成します。両方を移動します。背景色は、親要素の背景色と同じ色に設定され、親要素をブロックするために使用されます。

このようにして、完璧なグリッチスタイルのテキスト表示アニメーションを実現できます~

クールな特殊効果 Web ページに別のスタイルを追加できます。この記事で実現した効果のソースコードは Github にアップロードされています。バックグラウンドで aaa テキスト効果に返信することで取得できます。公式アカウントですので、ぜひ一緒に学びましょう！

(学習ビデオ共有:

css ビデオチュートリアル

)

以上が5 つの純粋な CSS を整理して共有し、クールなテキスト効果を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。