ホームページ > 記事 > ウェブフロントエンド > HTML/CSS を使用して、興味深い動的な波線のテキストを作成します
HTML/CSS を使用して、興味深い動的な波線のテキストを作成します
- 藏色散人オリジナル
- 2021-08-27 14:37:242312ブラウズ
前回の記事『は超実践的！ CSS は、ボタンをクリックしたときに押すという動的な効果を実装します。>>CSS を使用して、ボタンをクリックしたときに押すという動的な効果を表示する方法を紹介しました。必要な友達は、それについて学びに行くことができます~
この記事では、HTML/CSS を使用して、興味深い動的な波状のテキスト ライン効果を作成する方法を説明します。
完全なコード例を直接見てみましょう:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: rgb(74, 152, 255);
}
.wavy {
position: relative;
}
.wavy span {
position: relative;
display: inline-block;
color: #fff;
font-size: 2em;
text-transform: uppercase;
animation: animate 2s ease-in-out infinite;
animation-delay: calc(0.1s * var(--i));
}
@keyframes animate {
0% {
transform: translateY(0px);
}
20% {
transform: translateY(-20px);
}
40%,
100% {
transform: translateY(0px);
}
}
</style>
</head>
<body>
<div class="wavy">
<span style="--i:1">P</span>
<span style="--i:2">H</span>
<span style="--i:3">P</span>
<span style="--i:4">中</span>
<span style="--i:5">文</span>
<span style="--i:6">网</span>
<span style="--i:7">开</span>
<span style="--i:8">班</span>
<span style="--i:9">啦</span>
<span style="--i:10">~</span>
<span style="--i:11">快</span>
<span style="--i:12">学</span>
<span style="--i:13">起</span>
<span style="--i:14">来</span>
<span style="--i:15">~</span>
<span style="--i:16">~</span>
<span style="--i:17">~</span>
</div>
</body>
</html>効果は次のとおりです:
直接コピーできます。上記のコードをローカルでデモを実行します。
ここにいくつかの重要な属性があります:
text-transform 属性はテキストの大文字と小文字を制御します。
アニメーション プロパティは短縮形のプロパティです:
animation-name：规定需要绑定到选择器的 keyframe 名称。。 animation-duration：规定完成动画所花费的时间，以秒或毫秒计。 animation-timing-function：规定动画的速度曲线。 animation-delay：规定在动画开始之前的延迟。 animation-iteration-count：规定动画应该播放的次数。 animation-direction：规定是否应该轮流反向播放动画。
アニメーションは @keyframes ルールを通じて作成できます。
语法：@keyframes animationname {keyframes-selector {css-styles;}}
参数animationname必需：定义动画的名称。
参数keyframes-selector必需：动画时长的百分比。
合法的值：
0-100%
from（与 0% 相同）
to（与 100% 相同）
参数css-styles必需：一个或多个合法的 CSS 样式属性。PHP 中国語 Web サイト プラットフォームには、多くのビデオ教育リソースがあります。皆さんも「css ビデオ チュートリアル 」を学習してください。
以上がHTML/CSS を使用して、興味深い動的な波線のテキストを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。