ホームページ > 記事 > ウェブフロントエンド > CSSを使用してスポットライト効果を作成する方法（コードは添付されています）

CSSを使用してスポットライト効果を作成する方法（コードは添付されています）

青灯夜游転載: 2022-04-11 11:12:484375ブラウズ

CSS を使用してスポットライト効果を作成するにはどうすればよいですか?次の記事では、CSS スポットライト効果の実装原理を分析し、実装コードを共有します。

CSS スポットライト効果の実装原理は非常にシンプルです:

2 つのテキストを完全に重ね合わせます。内側のレイヤーは濃い灰色で、外側のレイヤーはグラデーションカラーです。 [推奨学習: css ビデオチュートリアル ]
外側のテキストに円形マスクを適用します。
最後に CSS アニメーション を追加します。

テクニカルサポート

参照される CSS プロパティは次のとおりです:

implementation

HTML 構造を単純にするために、後で疑似クラス要素を使用します。

HTML コードは次のとおりです:

<h1 data-text="我想藏在罐头里!!!">我想藏在罐头里</h1>

注: attr() 理論的にはすべての CSS プロパティに使用できますが、現時点ではサポートされているのは、疑似要素の content 属性のみです。その他の属性と高度な機能は現在実験中です。

翻訳者注: ブラウザが attr と互換性があることがわかった場合は、 ( ) はまだ十分なサポートがありません。この記事のほとんどの内容は机上の話です。

QuoteMDN document

CSS コードは次のとおりです。以下:

*{
    margin: 0;
    padding: 0;
}

:root{
  --ellipse: 6.25rem;
}

html, body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #222;
}
h1{
    font-size: 4rem;
    color: #333;
    width: 37.5rem;
    position: relative;
}
h1::after{
    /* attr(attribute_name) */
    content:attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: pink;
    clip-path: ellipse(var(--ellipse) var(--ellipse) at 0% 50%);
    animation: move 5s infinite;
}
@keyframes move{
    0%, 100%{
        clip-path: ellipse(var(--ellipse) var(--ellipse) at 0% 50%);
    }
    50%{
        clip-path: ellipse(var(--ellipse) var(--ellipse) at 100% 50%);
    }
}

効果は次のとおりです:

CSSを使用してスポットライト効果を作成する方法（コードは添付されています）

これで、動的なスポットライト効果が完成しました。

しかし、まだ問題があります。私の親切な友人はそれに気づいたでしょうか。完成した製品のテキストは color です。原理は、背景画像を追加してから使用することです。最後に color を透明に変更するため、コードを変更する必要があります。

コード background-image と background-clip を h1:after に追加します:

h1::after{
    /* 别忘记修改color为透明 */
    color: transparent;
    background-image: linear-gradient(to left,#1a2a6c,#b21f1f,#fdbb2d);
    background-clip: text;
    /* 因为background-clip是预览阶段的css属性，要加上一个前缀版本 */
    -webkit-background-clip: text;
}

最後の部分を見てください。完成したエフェクト:

CSSを使用してスポットライト効果を作成する方法（コードは添付されています）