ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML/CSSで面白いテキストの液体塗りつぶし効果を実現
前回の記事「CSSを使って回転半径を動的に調整する方法は?」 >>CSS を使用して回転半径を動的に調整する効果を紹介します。興味のある友人はそれについて学ぶことができます~
この記事では、特に興味深い実装効果をお届けします。 title? 上記の「テキストの液体塗りつぶし効果」について何かアイデアはありますか?
まず、下の図に示すように、この効果がどのようなものかを見てみましょう:
完全な HTML/ を直接アップロードしてみましょう。 css コード:
注: 液体塗りつぶしテキスト アニメーションは、CSS::before セレクターを使用して実行できます。キーフレームを使用して、アニメーションの各フレームの高さを設定します。
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title></title> <style> body { margin: 0; padding: 0; } h1 { margin: 200px 0; padding: 0; font-size: 80px; position: relative; color: #45b1ff; } h1:before { content: "PHP中文网"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color:white; overflow: hidden; animation: animate 6s infinite; } @keyframes animate { 0% { height: 25%; } 25% { height: 50%; } 50% { height: 65%; } 75% { height: 40%; } 100% { height: 25%; } } </style> </head> <body> <center> <h1>PHP中文网</h1> </center> </body> </html>
このコードを実行すると、上の図に示すような効果が得られます。
この効果を実現するには、CSS の :before セレクターと @keyframes ルールに精通している必要があります。
:before selector:
:before selector は、選択した要素のコンテンツの前にコンテンツを挿入します。挿入するコンテンツを指定するには、content 属性を使用します。
注: IE8 以前のバージョンの :before の場合、1a309583e26acea4f04ca31122d8c535
@keyframes ルールを宣言する必要があります:
Use @ Withキーフレーム ルールに従って、CSS スタイル設定を別の設定に徐々に変更することでアニメーションを作成できます。 CSS スタイル設定はアニメーション中に複数回変更できます。いつ変更するかを%、または0%から100%と同じキーワード「from」と「to」を使用して指定します。 0% はアニメーションの開始時、100% はアニメーションの終了時です。ブラウザーを最適にサポートするには、常に 0% と 100% のセレクターを定義する必要があります。
注: アニメーション属性を使用してアニメーションの外観を制御し、セレクターを使用してアニメーションをバインドします。
PHP 中国語 Web サイト プラットフォームには、多くのビデオ教育リソースがあります。「css ビデオ チュートリアル 」と「HTML ビデオ チュートリアル 」を学習することを歓迎します。
以上がHTML/CSSで面白いテキストの液体塗りつぶし効果を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。