<!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: linear-gradient(135deg, #1a1a2e, #16213e);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: 'Arial', sans-serif;
overflow: hidden;
}
.wave-container {
text-align: center;
position: relative;
}
.wave-text {
font-size: 4rem;
font-weight: bold;
color: #fff;
text-shadow: 0 0 10px rgba(255,255,255,0.3);
display: inline-block;
margin-bottom: 30px;
}
.wave-text span {
display: inline-block;
position: relative;
transition: all 0.3s ease;
}
.credit {
position: absolute;
bottom: 20px;
right: 20px;
color: rgba(255,255,255,0.5);
font-size: 12px;
}
/* 插入的链接样式 */
.inserted-link {
color: #4facfe;
text-decoration: none;
font-size: 14px;
position: absolute;
top: 20px;
right: 20px;
transition: all 0.3s ease;
}
.inserted-link:hover {
color: #00f2fe;
text-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
}
/* 波浪动画 */
@keyframes wave {
0% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-15px) rotate(5deg); }
50% { transform: translateY(0) rotate(0deg); }
75% { transform: translateY(10px) rotate(-5deg); }
100% { transform: translateY(0) rotate(0deg); }
}
</style>
</head>
<body>
<div class="wave-container">
<div class="wave-text" id="waveText">jQuery波浪文字特效</div>
</div>
<div class="credit">动画效果使用jQuery实现</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 将文本拆分为单个字符
var text = $('#waveText').text();
$('#waveText').empty();
// 为每个字符创建span元素
for (var i = 0; i < text.length; i++) {
var char = text.charAt(i);
if (char === ' ') {
char = ' ';
}
var $span = $('<span>').html(char);
// 设置不同的颜色
var hue = (i * 30) % 360;
$span.css('color', 'hsl(' + hue + ', 100%, 70%)');
$('#waveText').append($span);
}
// 为每个字符添加波浪动画
$('#waveText span').each(function(index) {
$(this).css({
'animation': 'wave 2s ease-in-out infinite',
'animation-delay': (index * 0.1) + 's',
'display': 'inline-block'
});
// 添加鼠标悬停效果
$(this).hover(
function() {
$(this).css({
'transform': 'scale(1.2)',
'text-shadow': '0 0 15px rgba(255,255,255,0.7)'
});
},
function() {
$(this).css({
'transform': 'scale(1)',
'text-shadow': 'none'
});
}
);
});
// 添加背景动画
function updateBackground() {
var hue = (Date.now() / 50) % 360;
$('body').css('background',
'linear-gradient(135deg, hsl(' + (hue) + ', 50%, 20%), hsl(' + (hue + 60) + ', 50%, 20%))');
requestAnimationFrame(updateBackground);
}
updateBackground();
});
</script>
</body>
</html>
扫一扫
651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
