資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學使用純 CSS 在文字中新增波浪效果
開發者可以使用 CSS 為 HTML 元素新增動畫。在這裡，我們將使用 CSS 在文字內新增波浪效果。它看起來像文字中的真實波浪。
這裡，我們有三種方法可以為文字新增波浪效果。我們將逐一檢視所有方法。
語法
使用者可以按照以下語法為文字新增波浪效果。
@keyframes wavey {
0%,
100% {
/* add initial clip-path */
}
50% {
/* final clip path */
}
}
在上面的語法中，我們建立了關鍵幀，它用於透過更改文字的剪下路徑來為文字新增動畫。
示例 1
在下面的示例中，我們建立了兩個 <p> 元素並在兩者中添加了相同的文字。使用 CSS，我們將文字放置在這樣一種方式，以便兩者相互覆蓋。我們為第一個文字值設定了透明顏色和藍色邊框。對於第二個文字，我們設定了紅色和波浪動畫，持續時間為 5 秒。
為了新增動畫，我們更改了 `clip-path` 屬性的值。在 CSS 中，`clip-path` 屬性用於顯示元素的特定區域，並透過將其遮蔽來隱藏其他區域。例如，這裡我們顯示文字中的多邊形及其特定座標，並隱藏第二個文字值的其餘區域。
<html>
<head>
<style>
.head {
font-size: 30px;
font-weight: 300;
}
/* set transparent color for first text */
.text:nth-child(1) {
color: transparent;
-webkit-text-stroke: 1px blue;
}
/* set wavy effect in the second text */
.text:nth-child(2) {
color: red;
animation: wavey 5s ease-in-out infinite;
}
.text {
font-size: 6rem;
position: absolute;
}
/* Add animation to the second text using the clip-path CSS property. */
@keyframes wavey {
0%,
100% {
clip-path: polygon(0 45%, 6% 38%, 20% 27%,
38% 24%, 40% 47%, 49% 64%, 51% 72%,
74% 78%, 79% 75%, 100% 67%, 100% 100%,
0 100%);
}
50% {
clip-path: polygon(0 59%, 5% 71%, 24% 86%,
34% 71%, 41% 64%, 41% 46%, 51% 35%,
74% 21%, 89% 35%, 100% 42%, 100% 100%,
0 100%);
}
}
</style>
</head>
<body>
<p class = "text"> TUTORIALSPOINT </p>
<p class = "text"> TUTORIALSPOINT </p>
<div class = "head"> Adding the <i> Wave effect inside the text </i> using HTML and CSS </div>
</body>
</html>
示例 2
在下面的示例中，我們使用 `radial-gradient` 和 `background-position` CSS 屬性為 HTML 元素新增波浪效果。在這裡，我們為文字添加了徑向漸變，形狀相同，位置相同，並且文字的每 25% 部分的顏色都不同。
在動畫關鍵幀中，我們更改背景元素的背景位置，這會移動背景元素並在文字中生成波浪效果。
<html>
<head>
<style>
.text {
display: inline-block;
padding: 10px;
font-size: 40px;
font-weight: bold;
/* adding background using a gradient to the text */
background:
radial-gradient(100% 54% at top, blue 99%, red) calc(0*100%/3) 0,
radial-gradient(100% 58% at bottom, red 99%, blue) calc(3*100%/3) 0,
radial-gradient(100% 58% at top, blue 99%, red) calc(6*100%/3) 0,
radial-gradient(100% 58% at bottom, red 99%, blue) calc(9*100%/3) 0;
/* set up background size and repeat */
background-size: 50% 100%;
background-repeat: no-repeat;
/* setup text as a background clip */
-webkit-background-clip: text;
color: transparent;
background-clip: text;
animation: wavy 2s infinite linear;
}
@keyframes wavy {
/* change background-position */
to {
background-position:
calc(-6*100%/3) 0,
calc(-3*100%/3) 0,
calc(0*100%/3) 0,
calc(3*100%/3) 0;
}
}
</style>
</head>
<body>
<h2>Adding the <i> Wave effect inside the text </i> using HTML and CSS</h2>
<div class = "text">Welcome to the TutorialsPoint!</div>
</body>
</html>
示例 3
在下面的示例中，我們不是在文字內新增波浪效果，而是像波浪一樣移動文字的每個字元。在這裡，我們在 <span> 元素中添加了文字的每個字元。之後，我們在每個字元上添加了 `wave-text` 動畫。
在 `wave-text` 動畫中，我們使用 `transform` CSS 屬性在 Y 方向上移動字元。之後，我們透過使用 `nth-child` CSS 屬性訪問字元來為每個字元新增動畫延遲。
<html>
<head>
<style>
.text {
margin-top: 5rem;
}
.text span {
display: inline-block;
font-size: 3rem;
color: blue;
animation: wave-text 1.4s ease-in-out infinite;
}
.text span:nth-child(1) {
animation-delay: 0.0s;
}
.text span:nth-child(2) {
animation-delay: 0.1s;
}
.text span:nth-child(3) {
animation-delay: 0.2s;
}
.text span:nth-child(4) {
animation-delay: 0.3s;
}
.text span:nth-child(5) {
animation-delay: 0.4s;
}
.text span:nth-child(6) {
animation-delay: 0.5s;
}
.text span:nth-child(7) {
animation-delay: 0.6s;
}
@keyframes wave-text {
0% {
transform: translateY(0rem);
}
55% {
transform: translateY(-1.5rem);
}
100% {
transform: translateY(0rem);
}
}
</style>
</head>
<body>
<h2>Adding the <i> Wave effect inside the text </i> using HTML and CSS</h2>
<div class = "text">
<span> H </span>
<span> T </span>
<span> M </span>
<span> L </span>
<span> C </span>
<span> S </span>
<span> S </span>
</div>
</body>
</html>
使用者學習瞭如何在文字中新增波浪效果。在第一種方法中，我們使用 `clip-path` 屬性以多邊形形狀剪下文字並新增波浪效果。在第二種方法中，我們使用 `radial-gradient` 和 `background-position` CSS 屬性進行動畫。在最後一種方法中，我們使用 `transform` CSS 屬性變換整個文字。
548 次瀏覽
