jQuery波浪文字动画特效

jQuery实现波浪文字动画特效

原创已于 2025-06-27 10:51:53 修改 · 372 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css3

于 2025-06-24 13:27:54 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery波浪文字动画特效</title>
<style>
body {
background-color: #222;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: 'Arial', sans-serif;
overflow: hidden;
}

.wave-text {
font-size: 60px;
font-weight: bold;
color: #fff;
text-shadow: 0 0 10px rgba(255,255,255,0.5);
display: inline-block;
}

.wave-text span {
display: inline-block;
position: relative;
}

.credit {
position: absolute;
bottom: 20px;
right: 20px;
color: #666;
font-size: 12px;
}

/* 插入的链接样式 */
.inserted-link {
color: #4CAF50;
text-decoration: none;
font-size: 14px;
position: absolute;
top: 20px;
right: 20px;
}
</style>
</head>
<body>
<div class="wave-text" id="waveText">波浪文字动画特效</div>

<div class="credit">jQuery波浪文字效果</div>