Pure CSSを使って複数行テキストのフェードアニメーションを実現する方法を詳しく解説-CSSチュートリアル-php.cn

この記事では、複数行のテキスト状況における興味深いテキストアニメーションをいくつか取り上げます。複数行テキストは単行テキストに比べて複雑な場面が多いですが、実際のビジネスでは複数行テキストも多くありますが、そのエフェクト処理は単行テキストよりも難しくなります。

Pure CSSを使って複数行テキストのフェードアニメーションを実現する方法を詳しく解説

【学習ビデオ共有: css ビデオチュートリアル、Web フロントエンド】

単一行テキストと複数行テキストのフェードアウト

まず、このような単一行テキストのフェードアウトを実装する例を見てみましょう:

mask を使用すると、この効果を簡単に実現できます。

<p>Lorem ipsum dolor sit amet consectetur.</p>

ログイン後にコピー

p {
    mask: linear-gradient(90deg, #fff, transparent);
}

ログイン後にコピー

しかし、シーンが複数行になったらどうなるでしょうか?複数行テキストの最後の行をフェードアウトし、さまざまな複数行シナリオに適応させる必要があります。

これは少し複雑ですが、多くの点があります。いくつかの方法で達成できます。

まず、background の使用方法を見てみましょう。

使用 `背景` 実装

ここでは、トリックは、display: inline インライン要素の background 表示形式が display: block ブロックレベル要素 (または inline-block) と同じであることです。 、flex、grid) が矛盾しています。

簡単な例:

<p>Lorem .....</p>
<a>Lorem .....</a>

ログイン後にコピー

ここで、 要素は ブロックレベルの要素 であり、 <a> は インライン要素 です。

緑から青へのグラデーションの背景色を追加します:

p, a {
  background: linear-gradient(90deg, blue, green);
}

ログイン後にコピー

効果を見てください:

何? 何を意味しますか?それはどういう意味ですか？違いは明らかで、ブロックレベル要素の背景は全体としてグラデーションになっていますが、インライン要素は一行ごとに異なる効果があり、全体が直列につながって全体を形成しています。

この機能に基づいて、次のようなレイアウトを構築できます:

<p><a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a></p>

ログイン後にコピー

p {
    position: relative;
    width: 400px;
}

a {
    background: linear-gradient(90deg, transparent, transparent 70%, #fff);
    background-repeat: no-repeat;
    cursor: pointer;
    color: transparent;
    
    &::before {
        content: "Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam";
        position: absolute;
        top: 0;
        left: 0;
        color: #000;
        z-index: -1;
    }
}

ログイン後にコピー

ここで説明が必要です:

実際のインライン要素 background 機能では、実際のテキストをインライン要素内にラップする必要があります <a>
実際のテキスト、 using opacity: 0 is hidden. 実際に表示されるテキストは、<a> 要素の擬似要素を使用し、そのレベルを -1 に設定します。目的は、親要素の背景でそれをカバーできるようにすることです
##<a> 要素のグラデーションは透明から白であり、それを使用して実際の基礎となる部分をカバーします。疑似要素を使用してテキストを表示し、テキストのフェードを実現します。

#この方法で、次のような効果を得ることができます:

ここで、<a>

 要素のグラデーションは透明から白で、後ろの白を使用して徐々にテキストを覆います。

グラデーションを黒から白に変更すると (わかりやすくするために、グラデーションの黒と白にある程度の透明度があります)、何が起こっているかをすぐに理解できます。

a {
    background: linear-gradient(90deg, rgba(0,0,0, .8), rgba(0,0,0, .9) 70%, rgba(255, 255, 255, .9));
}

ログイン後にコピー

完全なコードについては、ここをクリックしてください: CodePen デモ -- テキストが消えていく

もちろん、このソリューションには # の使用など、多くの問題があります。 ##z-index: -1、親コンテナーが背景色を設定している場合、それは無効になり、最後の行を正確に見つけるのは簡単ではありません。したがって、より良い方法は、mask を使用して解決することです。

mask` を使用して` を達成すると、次のようになります。

mask を使用すると、問題はより簡単になります。1 つの mask に 2 つの mask 領域を実装するだけで済みます。1 つは最後の行を正確に制御するためのもので、使用される部分です残りの部分の透明度を制御します。 HTML を特別に構築する必要はありません:

<p>Lorem ipsum dolor sit amet ....</p>

ログイン後にコピー

p {
    width: 300px;
    padding: 10px;
    line-height: 36px;
    mask: 
        linear-gradient(270deg, transparent, transparent 30%, #000),
        linear-gradient(270deg, #000, #000);
    mask-size: 100% 46px, 100% calc(100% - 46px);
    mask-position: bottom, top;
    mask-repeat: no-repeat;
}

ログイン後にコピー

効果は次のとおりです:

核心在于整个 mask 相关的代码，正如上面而言的，mask 将整个区域分成了两块进行控制：

在下部分这块，我们利用 mask 做了从右向左的渐隐效果。并且利用了 mask-position 定位，以及 calc 的计算，无论文本都多少行，都是适用的！需要说明的是，这里的 46px 的意思是单行文本的行高加上 padding-bottom 的距离。可以适配任意行数的文本：

完整的代码，你可以戳这里：CodePen Demo -- Text fades away 2

添加动画效果

好，看完静态的，我们再来实现一种**动态的文字渐隐消失。

整体的效果是当鼠标 Hover 到文字的时候，整个文本逐行逐渐消失。像是这样：

这里的核心在于，需要去适配不同的行数，不同的宽度，而且文字是一行一行的进行消失。

这里核心还是会运用上内联元素 background 的特性。在妙用 background 实现花式文字效果这篇文章中，我们介绍了这样一种技巧。

实现整段文字的渐现，从一种颜色到另外一种颜色：

<div class="button">Button</div>
<p><a>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</a></p>

ログイン後にコピー

a {    
    background: 
        linear-gradient(90deg, #999, #999),
        linear-gradient(90deg, #fc0, #fc0);
    background-size: 100% 100%, 0 100px;
    background-repeat: no-repeat;
    background-position: 100% 100%, 0 100%;
    color: transparent;
    background-clip: text;
}
.button:hover ~ p a {
    transition: .8s all linear;
    background-size: 0 100px, 100% 100%;
}

ログイン後にコピー

这里需要解释一下，虽然设置了 color: transparent，但是文字默认还是有颜色的，默认的文字颜色，是由第一层渐变赋予的 background: linear-gradient(90deg, #999, #999), linear-gradient(90deg, #fc0, #fc0)，也就是这一层：linear-gradient(90deg, #999, #999)。

当 hover 触发时，linear-gradient(90deg, #999, #999) 这一层渐变逐渐消失，而另外一层 linear-gradient(90deg, #fc0, #fc0)` 逐渐出现，借此实现上述效果。

CodePen -- background-clip 文字渐现效果

好，我们可以借鉴这个技巧，去实现文字的渐隐消失。一层为实际的文本，而另外一层是进行动画的遮罩，进行动画的这一层，本身的文字设置为 color: transparent，这样，我们就只能看到背景颜色的变化。

大致的代码如下：

<p>
    <a class="word">Mollitia nostrum placeat consequatur deserunt.</a>
    <a class="pesudo">Mollitia nostrum placeat consequatur deserunt.</a>
</p>

ログイン後にコピー

p {
    width: 500px;
}
.word {
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    color: #000;
}
.pesudo {    
    position: relative;
    background: linear-gradient(90deg, transparent, #fff 20%, #fff);
    background-size: 0 100%;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    transition: all 3s linear;
    color: transparent;
}
p:hover .pesudo,
p:active .pesudo{
    background-size: 500% 100%;
}

ログイン後にコピー

其中，.word 为实际在底部，展示的文字层，而 pesudo 为叠在上方的背景层，hover 的时候，触发上方元素的背景变化，逐渐遮挡住下方的文字，并且，能适用于不同长度的文本。