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

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

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

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

テクニカル サポート

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

• linear-gradient()
• background-image
• background-clip
• clip-path

implementation

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

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

<h1 id="我想藏在罐头里">我想藏在罐头里</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%);
    }
}

効果は次のとおりです:

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

しかし、まだ問題があります。私の親切な友人はそれに気づいたでしょうか。完成した製品のテキストは 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;
}

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

デモのソース コードはここにあります CodePen リンク:

https://codepen.io/jackbrens/pen/ MWrGNed

概要

上記は、この共有の内容全体です~~

この記事がよく書かれており、インスピレーションを受けたと思われる場合は、ご遠慮ください。 「いいね」 や フォロー をして、貴重な意見を コメント エリア ~~

(学習ビデオの共有: ) に残してください。ウェブフロントエンド)

以上がCSSを使用してスポットライト効果を作成する方法（コードは添付されています）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。