ホームページ > 記事 > ウェブフロントエンド > HTML/CSSで面白いテキストの液体塗りつぶし効果を実現
HTML/CSSで面白いテキストの液体塗りつぶし効果を実現
- 藏色散人オリジナル
- 2021-08-30 14:26:192291ブラウズ
前回の記事「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 サイトの他の関連記事を参照してください。