<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animate.css 文字特效</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #1a1a2e, #16213e);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
overflow-x: hidden;
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 50px;
}
.header h1 {
font-size: 3rem;
margin-bottom: 20px;
background: linear-gradient(90deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 300% 300%;
animation: gradientBG 5s ease infinite;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.effects-container {
width: 100%;
max-width: 800px;
}
.effect-item {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.effect-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.effect-title {
font-size: 1.5rem;
margin-bottom: 15px;
color: #fbc2eb;
}
.effect-demo {
font-size: 2rem;
font-weight: bold;
text-align: center;
padding: 20px;
margin: 20px 0;
cursor: pointer;
user-select: none;
transition: all 0.3s ease;
}
.effect-demo:hover {
transform: scale(1.05);
}
.effect-desc {
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
}
.footer {
margin-top: 50px;
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-size: 0.9rem;
}
.footer a {
color: #fbc2eb;
text-decoration: none;
transition: all 0.3s ease;
}
.footer a:hover {
color: #a6c1ee;
text-decoration: underline;
}
/* 自定义动画延迟 */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1s; }
/* 响应式设计 */
@media (max-width: 768px) {
.header h1 {
font-size: 2rem;
}
.effect-title {
font-size: 1.3rem;
}
.effect-demo {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<div class="header">
<h1 class="animate__animated animate__fadeInDown">Animate.css 文字特效</h1>
<p class="animate__animated animate__fadeIn animate__delay-1s">点击下方文字查看不同动画效果</p>
</div>
<div class="effects-container">
<!-- 特效1 -->
<div class="effect-item animate__animated animate__fadeInLeft delay-1">
<h3 class="effect-title">弹跳入场</h3>
<div class="effect-demo" onclick="playAnimation(this, 'animate__bounceIn')">
弹跳文字效果
</div>
<p class="effect-desc">文字像球一样弹跳进入视线，充满活力和趣味性，适合强调重要内容。</p>
</div>
<!-- 特效2 -->
<div class="effect-item animate__animated animate__fadeInRight delay-2">
<h3 class="effect-title">闪烁强调</h3>
<div class="effect-demo" onclick="playAnimation(this, 'animate__flash')">
闪烁文字效果
</div>
<p class="effect-desc">文字快速闪烁，立即吸引用户注意力，适合警示或特别提示内容。</p>
</div>
<!-- 特效3 -->
<div class="effect-item animate__animated animate__fadeInLeft delay-3">
<h3 class="effect-title">橡皮筋拉伸</h3>
<div class="effect-demo" onclick="playAnimation(this, 'animate__rubberBand')">
橡皮筋效果
</div>
<p class="effect-desc">文字像橡皮筋一样拉伸回弹，有趣且引人注目，适合按钮或可点击元素。</p>
</div>
<!-- 特效4 -->
<div class="effect-item animate__animated animate__fadeInRight delay-4">
<h3 class="effect-title">翻转进入</h3>
<div class="effect-demo" onclick="playAnimation(this, 'animate__flipInX')">
翻转文字效果
</div>
<p class="effect-desc">文字沿X轴翻转进入，带来3D立体感，适合展示卡片或图片标题。</p>
</div>
<!-- 特效5 -->
<div class="effect-item animate__animated animate__fadeInLeft delay-5">
<h3 class="effect-title">放大抖动</h3>
<div class="effect-demo" onclick="playAnimation(this, 'animate__tada')">
抖动文字效果
</div>
<p class="effect-desc">文字放大并轻微抖动，营造庆祝氛围，适合成功提示或成就展示。</p>
</div>
<!-- 特效6 -->
<div class="effect-item animate__animated animate__fadeInRight delay-1">
<h3 class="effect-title">渐显光晕</h3>
<div class="effect-demo" onclick="playAnimation(this, 'animate__lightSpeedInRight')">
光晕文字效果
</div>
<p class="effect-desc">文字带着光晕从右侧快速滑入，极具科技感和速度感。</p>
</div>
<!-- 特效7 -->
<div class="effect-item animate__animated animate__fadeInLeft delay-2">
<h3 class="effect-title">旋转下落</h3>
<div class="effect-demo" onclick="playAnimation(this, 'animate__rotateInDownLeft')">
旋转文字效果
</div>
<p class="effect-desc">文字旋转着从上方落下，优雅且引人注目，适合产品特性展示。</p>
</div>
<!-- 特效8 -->
<div class="effect-item animate__animated animate__fadeInRight delay-3">
<h3 class="effect-title">弹跳放大</h3>
<div class="effect-demo" onclick="playAnimation(this, 'animate__bounceInUp')">
弹跳放大效果
</div>
<p class="effect-desc">文字从下方弹跳进入并放大，充满活力，适合欢迎信息或标题。</p>
</div>
</div>
<div class="footer animate__animated animate__fadeIn animate__delay-2s">
</div>
<script>
// 播放动画函数
function playAnimation(element, animation) {
// 移除之前的动画类
element.classList.remove('animate__animated');
for (let className of element.classList) {
if (className.startsWith('animate__')) {
element.classList.remove(className);
}
}
// 强制重绘
void element.offsetWidth;
// 添加新的动画类
element.classList.add('animate__animated', animation);
// 动画结束后移除类
element.addEventListener('animationend', function() {
element.classList.remove('animate__animated', animation);
}, {once: true});
}
// 页面加载时随机播放一些动画
document.addEventListener('DOMContentLoaded', function() {
const demos = document.querySelectorAll('.effect-demo');
// 延迟执行，确保初始动画完成
setTimeout(() => {
demos.forEach((demo, index) => {
setTimeout(() => {
const animations = [
'animate__bounceIn',
'animate__flash',
'animate__rubberBand',
'animate__flipInX',
'animate__tada',
'animate__lightSpeedInRight',
'animate__rotateInDownLeft',
'animate__bounceInUp'
];
playAnimation(demo, animations[index]);
}, index * 200);
});
}, 1500);
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
