溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“怎么用HTML/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 屬性是一個簡寫屬性：
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 樣式屬性。到此，相信大家對“怎么用HTML/CSS制作動態波浪形文本行”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
