这个高考助力标语生成器具有以下特点：
-
视觉设计：采用了蓝色为主色调，搭配渐变背景和圆形装饰元素，营造出宁静而充满希望的氛围，非常适合高考主题。
-
-
标语生成：内置了超过 100 条精心挑选的高考加油标语，每次点击按钮都会随机展示一条。
-
-
动画效果：
- 标语卡片有淡入效果
- 按钮有悬停提升和阴影变化效果
- 点击按钮时会触发庆祝彩屑动画
-
响应式设计：在不同屏幕尺寸上都能良好显示，从手机到桌面设备都有合适的布局。
-
用户体验：
- 标语背景色随机变化，增加视觉新鲜感
- 标语文字大小根据屏幕尺寸自动调整
- 按钮有明确的视觉
高考助力标语生成器代码分段解析
下面我将整个代码按照功能模块进行分段解析，帮助你理解每一部分的作用：
1. 头部引入与配置
html
预览
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高考助力标语生成器</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#FF7D00',
neutral: '#F5F7FA',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.bg-gradient-custom {
background: linear-gradient(135deg, #165DFF 0%, #4080FF 100%);
}
.btn-hover {
transition: all 0.3s ease;
}
.btn-hover:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px -5px rgba(22, 93, 255, 0.4);
}
.card-appear {
animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
opacity: 0;
animation: confetti-fall 3s ease-in-out forwards;
}
@keyframes confetti-fall {
0% {
transform: translateY(-100vh) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
}
</style>
</head>作用：
- 设置字符编码和响应式视图
- 引入 Tailwind CSS 和 Font Awesome 图标库
- 自定义 Tailwind 主题（颜色、字体）
- 定义自定义工具类和动画效果
- 文字阴影、渐变背景
- 按钮悬停动画
- 卡片淡入效果
- 彩屑飘落动画
2. 页面布局与背景装饰
html
预览
<body class="bg-neutral min-h-screen font-sans">
<!-- 背景装饰 -->
<div class="fixed inset-0 bg-gradient-to-br from-blue-50 to-indigo-50 -z-10"></div>
<div class="fixed inset-0 overflow-hidden -z-10">
<div class="absolute top-20 left-10 w-64 h-64 bg-primary/5 rounded-full blur-3xl"></div>
<div class="absolute bottom-20 right-10 w-80 h-80 bg-secondary/5 rounded-full blur-3xl"></div>
</div>
<div class="container mx-auto px-4 py-12 max-w-4xl">
<!-- 标题区域 -->
<header class="text-center mb-12">
<h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold text-primary mb-4 tracking-tight text-shadow">
<i class="fa fa-graduation-cap mr-3"></i>高考加油
</h1>
<p class="text-gray-600 text-lg max-w-2xl mx-auto">
每一份努力都值得被鼓励，点击下方按钮，获取一份专属的高考助力标语，为梦想加油！
</p>
</header>作用：
- 设置整体背景和装饰元素（渐变和模糊圆形）
- 创建内容容器，设置最大宽度和内边距
- 顶部标题区域：
- 使用 clamp () 实现自适应字体大小
- 添加毕业帽图标增强主题感
- 简短描述文字说明功能
3. 标语展示卡片
html
预览
<!-- 标语卡片 -->
<div id="messageCard" class="bg-white rounded-2xl shadow-xl p-8 mb-12 min-h-[250px] flex items-center justify-center card-appear opacity-0 transform translate-y-4 transition-all duration-500">
<div class="text-center">
<i class="fa fa-lightbulb-o text-primary/70 text-4xl mb-4"></i>
<p class="text-gray-500 text-xl italic">点击下方"金榜题名"按钮，获取你的高考助力标语</p>
</div>
</div>作用：
- 创建标语展示卡片：
- 圆角、阴影、白色背景
- 最小高度确保布局稳定
- 初始状态有淡入动画效果
- 初始显示提示文字和灯泡图标
- 后续会通过 JavaScript 动态更新内容
4. 按钮区域与页脚
html
预览
<!-- 按钮区域 -->
<div class="text-center">
<button id="generateBtn" class="bg-gradient-custom text-white font-bold py-4 px-12 rounded-full text-xl shadow-lg btn-hover focus:outline-none focus:ring-4 focus:ring-primary/30">
<i class="fa fa-rocket mr-2"></i>金榜题名
</button>
</div>
<!-- 装饰元素 -->
<div class="flex justify-center mt-16">
<div class="w-20 h-1 bg-primary/20 rounded-full"></div>
</div>
</div>
<!-- 页脚 -->
<footer class="text-center py-6 text-gray-500 text-sm">
<p>愿你提笔高考征战四方，愿你合笔谈笑清风无恙。</p>
</footer>作用：
- 创建 "金榜题名" 按钮：
- 渐变背景、圆角设计
- 悬停动画效果（提升、阴影变化）
- 焦点状态环增强可访问性
- 底部装饰线条和页脚文字
- 页脚使用鼓励性标语增强整体氛围
5. 标语库与核心功能
javascript
// 标语库
<script>
// 高考加油标语库
const messages = [
"十年寒窗苦读日，只盼金榜题名时，祝你高考拿高分，鲤鱼跳龙门！加油！",
"高考加油！亲爱的朋友，平和一下自己的心态，控制自己的情绪，以平常心态应考，考完一门忘一门，让自己尽量放松，好好休息。希望你一举高中喔！",
// ... 更多标语 ...
];
// 颜色库，用于标语背景
const colors = [
'bg-blue-50', 'bg-indigo-50', 'bg-purple-50',
'bg-pink-50', 'bg-red-50', 'bg-orange-50',
'bg-yellow-50', 'bg-green-50', 'bg-teal-50',
'bg-cyan-50'
];
// 获取DOM元素
const generateBtn = document.getElementById('generateBtn');
const messageCard = document.getElementById('messageCard');
// 生成随机数
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 生成随机标语
function generateMessage() {
// 随机选择一条标语
const randomIndex = getRandomInt(0, messages.length - 1);
const message = messages[randomIndex];
// 随机选择一种颜色
const randomColor = colors[getRandomInt(0, colors.length - 1)];
// 更新标语内容和样式
messageCard.className = `rounded-2xl shadow-xl p-8 mb-12 min-h-[250px] flex items-center justify-center card-appear ${randomColor}`;
messageCard.innerHTML = `
<div class="text-center">
<i class="fa fa-heart text-primary text-4xl mb-4 animate-pulse"></i>
<p class="text-gray-800 text-xl md:text-2xl font-medium leading-relaxed">${message}</p>
</div>
`;
// 添加动画效果
messageCard.style.opacity = '0';
messageCard.style.transform = 'translateY(20px)';
setTimeout(() => {
messageCard.style.opacity = '1';
messageCard.style.transform = 'translateY(0)';
}, 50);
// 添加庆祝效果
createConfetti();
}作用：
- 定义标语库（100 + 条高考加油标语）
- 定义背景颜色库（用于随机变化卡片背景）
- 获取 DOM 元素引用
- 实现随机数生成函数
- 核心标语生成函数：
- 随机选择标语和背景色
- 更新卡片内容和样式
- 添加平滑过渡动画
- 触发彩屑庆祝效果
6. 彩屑庆祝效果
javascript
// 创建庆祝彩屑效果
function createConfetti() {
const confettiCount = 150;
const container = document.body;
// 清除现有的彩屑
const existingConfetti = document.querySelectorAll('.confetti');
existingConfetti.forEach(confetti => confetti.remove());
// 创建新的彩屑
for (let i = 0; i < confettiCount; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
// 随机位置、颜色、形状和大小
confetti.style.left = `${Math.random() * 100}vw`;
const colors = ['#165DFF', '#4080FF', '#6AA1FF', '#FF7D00', '#FF9A3C', '#FFB779'];
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
if (Math.random() > 0.5) confetti.style.borderRadius = '50%';
const size = Math.random() * 10 + 5;
confetti.style.width = `${size}px`;
confetti.style.height = `${size}px`;
// 随机动画属性
confetti.style.animationDelay = `${Math.random() * 3}s`;
confetti.style.animationDuration = `${Math.random() * 3 + 3}s`;
container.appendChild(confetti);
}
}
// 按钮点击事件
generateBtn.addEventListener('click', generateMessage);
// 初始显示
window.addEventListener('load', () => {
setTimeout(() => {
messageCard.style.opacity = '1';
messageCard.style.transform = 'translateY(0)';
}, 300);
});
</script>
</body>
</html>作用：
- 彩屑效果实现：
- 创建 150 个随机颜色、大小和形状的彩屑元素
- 设置不同的动画延迟和持续时间
- 实现从顶部落下的动画效果
- 按钮点击事件监听，触发标语生成
- 页面加载时的初始动画效果
- 确保彩屑元素在每次生成时都被清除和重新创建
整体功能说明
这个高考助力标语生成器通过 HTML、CSS 和 JavaScript 实现了一个完整的单页应用，具有以下核心功能：
- 随机生成高考加油标语
- 每次生成时随机改变背景颜色
- 标语卡片的平滑过渡动画
- 点击按钮时的彩屑庆祝效果
- 完全响应式设计，适配各种设备
- 精心设计的 UI，包括渐变背景、阴影效果和视觉层次
代码结构清晰，功能模块分离，易于维护和扩展。通过合理使用 Tailwind CSS 和 JavaScript，实现了既美观又交互友好的用户体验。
代码全公开展示：python复制即可！！
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高考助力标语生成器</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#FF7D00',
neutral: '#F5F7FA',
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.bg-gradient-custom {
background: linear-gradient(135deg, #165DFF 0%, #4080FF 100%);
}
.btn-hover {
transition: all 0.3s ease;
}
.btn-hover:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px -5px rgba(22, 93, 255, 0.4);
}
.card-appear {
animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
opacity: 0;
animation: confetti-fall 3s ease-in-out forwards;
}
@keyframes confetti-fall {
0% {
transform: translateY(-100vh) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
}
</style>
</head>
<body class="bg-neutral min-h-screen font-sans">
<!-- 背景装饰 -->
<div class="fixed inset-0 bg-gradient-to-br from-blue-50 to-indigo-50 -z-10"></div>
<div class="fixed inset-0 overflow-hidden -z-10">
<div class="absolute top-20 left-10 w-64 h-64 bg-primary/5 rounded-full blur-3xl"></div>
<div class="absolute bottom-20 right-10 w-80 h-80 bg-secondary/5 rounded-full blur-3xl"></div>
</div>
<div class="container mx-auto px-4 py-12 max-w-4xl">
<!-- 标题区域 -->
<header class="text-center mb-12">
<h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold text-primary mb-4 tracking-tight text-shadow">
<i class="fa fa-graduation-cap mr-3"></i>高考加油
</h1>
<p class="text-gray-600 text-lg max-w-2xl mx-auto">
每一份努力都值得被鼓励，点击下方按钮，获取一份专属的高考助力标语，为梦想加油！
</p>
</header>
<!-- 标语卡片 -->
<div id="messageCard" class="bg-white rounded-2xl shadow-xl p-8 mb-12 min-h-[250px] flex items-center justify-center card-appear opacity-0 transform translate-y-4 transition-all duration-500">
<div class="text-center">
<i class="fa fa-lightbulb-o text-primary/70 text-4xl mb-4"></i>
<p class="text-gray-500 text-xl italic">点击下方"金榜题名"按钮，获取你的高考助力标语</p>
</div>
</div>
<!-- 按钮区域 -->
<div class="text-center">
<button id="generateBtn" class="bg-gradient-custom text-white font-bold py-4 px-12 rounded-full text-xl shadow-lg btn-hover focus:outline-none focus:ring-4 focus:ring-primary/30">
<i class="fa fa-rocket mr-2"></i>金榜题名
</button>
</div>
<!-- 装饰元素 -->
<div class="flex justify-center mt-16">
<div class="w-20 h-1 bg-primary/20 rounded-full"></div>
</div>
</div>
<!-- 页脚 -->
<footer class="text-center py-6 text-gray-500 text-sm">
<p>愿你提笔高考征战四方，愿你合笔谈笑清风无恙。</p>
</footer>
<!-- 标语库 -->
<script>
// 高考加油标语库
const messages = [
"十年寒窗苦读日，只盼金榜题名时，祝你高考拿高分，鲤鱼跳龙门！加油！",
"高考加油！亲爱的朋友，平和一下自己的心态，控制自己的情绪，以平常心态应考，考完一门忘一门，让自己尽量放松，好好休息。希望你一举高中喔！",
"明天高考啦，以后不用6点起床啦，以后可以天天游泳啦，明天是新生活的开始，一定不能愁眉苦脸，今晚做个好梦！",
"努力的苦读，就为这一刻啰！把你的实力全部发挥，所有关爱着你的人，都会为你祝福、祈祷，相信你会考出满意的成绩，榜上有名喔！",
"风儿静静的吹动，凤凰花吐露着嫣红，亲爱的朋友请握一握手，明天就要各奔西东！但不要忘记彼此的约定：高考成功！",
"挥一挥手，送你先走，我的潇洒微笑，但愿你永远记住。高考如期而至，希望你我高中，相约在理想的学校里再见！",
"高考的钟声即将要敲响，不管前面是狂风暴雨，还是风驰电掣，希望你都能够谈笑自如去面对，相信自己，一定能够鲤鱼跳龙门，门门考高分！",
"你有你的赤橙黄绿，我有我的青蓝靛紫，天空同属于我们，因为我们年轻。",
"试纸浸墨香，金笔下千言。思虑心平定，谨慎落笔闲。且喜平常度，切忌神慌乱。畅游题海后，金榜题君名。六月高考，祝你成功。",
"高考加油！为你倒数，还有几个小时就要上战场了，希望你能够放松心情，不要紧张。我知道你平时学习一向都很努力，学得很不错，相信你考好成绩是没问题的！",
"既然选择了要走的路，就一往无前地坚持下去，相信只要有信心，只要有勇气，就一定能掌握自己的前途和命运，成为真正的强者。",
"嗨，你还有空看短信呢？证明你没用功学习：P不过既然你看到的这条短信，我还是想把我一直想说的话告诉你：考试顺利，一起努力！",
"面对高考，保持你心灵的善良与纯洁；保持你情感的热情与丰富；保持你精神的进取与激昂！",
"决定心里的那片天空是否阴霾甚至是乌云密布的唯一因素是你自己，不能让自己永远有一个阳光灿烂的心情的人本身就是一个失败。",
"我知道你正在经历人生中的一次重要挑战，或许你有焦虑、有恐惧，也有激动，但我想说，请不要忘记身边所有关爱着你的人，我们是你坚强的后盾。",
"高考加油！这是一个只承认强者的时代，而学习正是赋予了我们做强者的原始资本。我们有责任，有义务学好知识。过程一定是苦的，可真正的强者一定要耐得住寂寞，受得了煎熬，抗得住诱惑。",
"这两天的考试过程中，要调整好自己的情绪，考过一门，就不要再想了，重要的是吃好，喝好，休息好，营造一种良好的应考氛围，祝愿你考试顺利！",
"你笔下拥有一个色彩绚丽的世界：愿你，也相信你，拥有另一个笔下灿烂的图景。",
"春天是碧绿是天地，秋天是黄金的世界。愿你用青春的绿色去酿造未来的金秋。",
"高考像漫漫人生路上的一道坎，无论成败与否，我认为现在都不重要了，重要的是要总结高考的得与失，以便在今后的人生之路上迈好每一个坎！",
"衷心地祝福你在今年的高考中定能一举夺魁，榜上有名，考入心中理想的大学。",
"高考加油！努力的苦读，就为这一刻啰！把你的实力全部发挥，所有关爱着你的人，都会为你祝福、祈祷，相信你会考出满意的成绩，榜上有名喔！",
"亲爱的同学，还有几天你就要踏进高考的战场，我在这里祝你考出好成绩，考进你理想的学校。有句话说的好，失败是成功之母，如果你这次没考好，也不要灰心，失败没什么大不了的，振作起来，明年的高考，你一定能考出好成绩。",
"为你倒数，还有几个小时就要上战场了，希望你能够放松心情，不要紧张。我知道你平时学习一向都很努力，学得很不错，相信你考好成绩是没问题的！",
"就要考试了，放开往日的学习中的紧张，用一颗平常心去轻松面对，相信你会考出自己理想的成绩的。愿好运一直陪伴着你！",
"这是一个只承认强者的时代，而学习正是赋予了我们做强者的原始资本。我们有责任，有义务学好知识。过程一定是苦的，可真正的强者一定要耐得住寂寞，受得了煎熬，抗得住诱惑。",
"高考加油！明天高考啦，以后不用6点起床啦，以后可以天天游泳啦，明天是新生活的开始，一定不能愁眉苦脸，今晚做个好梦！",
"长风破浪会有时，直挂云帆济沧海，高考是人生的一个起点，相信自己，明天又是一和个艳阳天！",
"高考加油！高考的意义是在于你真正投入的过程。请务必坚持信念，守得云开见月明！祝你们成功！",
"愿全国所有的考生都能以平常的心态参加高考，发挥自己的水平，考上理想的学校。我真心地祝福你们。",
"高考加油！你有你的赤橙黄绿，我有我的青蓝靛紫，天空同属于我们，因为我们年轻。",
"想说爱你，感觉太沉；想说喜欢，感觉太轻；一天天地眷恋，一夜夜的无眠，我只有数着相思的绿莹帘珠，托星月寄到你窗前。祝高考顺意！",
"高考加油！亲爱的孩子，天，每一天爸爸都在全心全意地为你祝福。祝愿你从小的梦想成真！爸爸相信你一定会成功，明年秋天我就可以到大学校园探望你，我们一言为定。",
"高考加油！当你走在高中校园的时候，你必须明白：你应当时时留意自己的一言一行，因为它反映着你的品性素养，影响着你的班风校貌，折射着你的家教家风。",
"高考加油！孩子，你是爸爸妈妈生命的延续，也是爸爸妈妈未来的希望，你的一举一动时刻牵动着爸爸妈妈的心。今后的路还很长，你要勇敢地面对任何挑战，爸爸妈妈是你坚实的后盾。",
"高考加油！高考的竞争是压力和挑战，也是机遇和希望，成功属于战胜自我的人。",
"高考加油！高考在即，希望你能克服各方面的心理压力，注意加强营养，保持良好精神状态，听从老师的教诲，相信你一定能超常发挥、马到成功！",
"高考加油！挥一挥手，送你先走，我的潇洒微笑，但愿你永远记住。高考如期而至，希望你我高中，相约在理想的学校里再见！",
"高考加油！高考中没有失败，它带给每个人的深刻思考、刻骨铭心的经历和感受都是不可多得的财富。我们为理想而奋进的过程，其意义远大于未知的结果。",
"高考加油！明天就要高考，出门还得趁早。付出就有回报，赶紧睡个好觉。毕竟熬过十年，参加就可骄傲。别想分数高低，放松最为重要。",
"高考加油！高三是集体战斗与个人成就的时期。",
"高考加油！风儿静静的吹动，凤凰花吐露着嫣红，亲爱的朋友请握一握手，明天就要各奔西东！但不要忘记彼此的约定：高考成功！",
"高考加油！人生能有几回搏？现在不搏更待何时？珍惜机遇吧，让金色的年华碰撞出更加灿烂的火花！",
"高考加油！这是一个考试顺利符哦，考试的人收到后会考出理想的成绩，愿你带着我的祝福，怀着一个好心情，轻松面对考试！",
"高考加油！试纸浸墨香，金笔下千言。思虑心平定，谨慎落笔闲。且喜平常度，切忌神慌乱。畅游题海后，金榜题君名。六月高考，祝你成功。",
"高考加油！六月骄阳似火烈，细雨甘霖润心田。求知路上千般苦，成绩优异谢师恩。十年苦读为今朝，金榜题名乐逍遥。我送祝福表心意，梦想成真直到老。",
"高考加油！孩子，高考是一个实现人生的省力杠杆，此时是你撬动它的最佳时机，并且以后你的人生会呈弧线上升。",
"高考加油！亲爱的孩子，你有着最令人羡慕的年龄，你的面前条条道路金光灿灿，愿你快快成长起来，去获取你光明的未来。",
"高考加油！你一定能行的！你要相信自己！对自己要有信心！我等你的好消息！",
"高考加油！我知道你正在经历人生中的一次重要挑战，或许你有焦虑、有恐惧，也有激动，但我想说，请不要忘记身边所有关爱着你的人，我们是你坚强的后盾。",
"高考加油！既然选择了要走的路，就一往无前地坚持下去，相信只要有信心，只要有勇气，就一定能掌握自己的前途和命运，成为真正的强者。",
"高考加油！当人生面对许多选择的时候，我们需要谨慎；当我们没有选择的时候，就把压力当挑战，给自己一个信心：这个世界上只要有人能在这条路上走得很好，我就能走好！",
"高考加油！亲爱的孩子，妈妈希望你能考上理想的大学，妈妈相信，在你的努力下，在你的坚持下，你一定能成功，妈妈永远支持你，永远爱你！",
"高考加油！高考的日子在逼近，希望你能调整好自己的心态，好好发挥，考上理想的公大！我在为你祝福。一定会成功的！",
"高考加油！六月鲜花竞相绽，捷报纷纷似花瓣。花香溢人醉心田，鲜花献送状元郎。十年苦读梦实现，名校专业细筛选。求索路上迈新步，博读书海天下闯。愿你大展才华。",
"高考加油！为你倒数，还有几个小时就要上战场了，希望你能够放松心情，不要紧张。我知道你平时学习一向都很努力，学得很不错，相信你考好成绩是没问题的！",
"高考加油！眼看高考就要来了，向前看，相信自己，我会在远方为你送去最真挚的祝福，付出就会有收获的！放松心情，去迎接挑战，我相信你，你一定是最出色的！",
"高考加油！这两天的考试过程中，要调整好自己的情绪，考过一门，就不要再想了，重要的是吃好，喝好，休息好，营造一种良好的应考氛围，祝愿你考试顺利！",
"高考加油！全国高考日到了，愿你执才高八斗生辉笔，饮才思万千智慧酒，带气定神闲满面笑，拥胸中成竹满怀志，书锦绣嫣然好答卷，定折取桂冠来题名。",
"高考加油！就要考试了，希望我的问候短信会为你送去一份轻松清爽的心情，不要太紧张哦！不然可会把答案忘掉的！我在这里支持着你，鼓励着你，为你祝福！",
"高考加油！孩子，你是爸爸妈妈生命的延续，也是爸爸妈妈未来的希望，你的一举一动时刻牵动着爸爸妈妈的心。今后的路还很长，你要勇敢地面对任何挑战，爸爸妈妈是你坚实的后盾。",
"高考加油！这是一个考试顺利符哦，考试的人收到后会考出理想的成绩，愿你带着我的祝福，怀着一个好心情，轻松面对考试！",
"高考加油！在即将高考的最后几天里，愿尽最大的可能，在远方倾诉我的祝福，相信自己的梦想与汗水，成功与好运相伴，高考大捷！",
"高考加油！祝愿天下所有考生开心度过高考。祝福你们旗开得胜，取得美好佳绩。平心对待高考，你们是最棒的！仁慈的上帝会祝福你们的，相信自己，一定能行！",
"高考加油！你就要高考了，我在百度搜出千百条祝福语，在搜狗找到无数句吉祥话，但我觉得都太俗。我只想真诚地对你说：得心应手高考顺利，十年努力今日成功！",
"高考加油！你有你的赤橙黄绿，我有我的青蓝靛紫，天空同属于我们，因为我们年轻。",
"高考加油！明天高考啦，以后不用6点起床啦，以后可以天天游泳啦，明天是新生活的开始，一定不能愁眉苦脸，今晚做个好梦！",
"高考加油！努力的苦读，就为这一刻啰！把你的实力全部发挥，所有关爱着你的人，都会为你祝福、祈祷，相信你会考出满意的成绩，榜上有名喔！",
"高考加油！风儿静静的吹动，凤凰花吐露着嫣红，亲爱的朋友请握一握手，明天就要各奔西东！但不要忘记彼此的约定：高考成功！",
"高考加油！挥一挥手，送你先走，我的潇洒微笑，但愿你永远记住。高考如期而至，希望你我高中，相约在理想的学校里再见！",
"高考加油！人生能有几回搏？现在不搏更待何时？珍惜机遇吧，让金色的年华碰撞出更加灿烂的火花！",
"高考加油！试纸浸墨香，金笔下千言。思虑心平定，谨慎落笔闲。且喜平常度，切忌神慌乱。畅游题海后，金榜题君名。六月高考，祝你成功。",
"高考加油！六月骄阳似火烈，细雨甘霖润心田。求知路上千般苦，成绩优异谢师恩。十年苦读为今朝，金榜题名乐逍遥。我送祝福表心意，梦想成真直到老。",
"高考加油！孩子，高考是一个实现人生的省力杠杆，此时是你撬动它的最佳时机，并且以后你的人生会呈弧线上升。",
"高考加油！亲爱的孩子，你有着最令人羡慕的年龄，你的面前条条道路金光灿灿，愿你快快成长起来，去获取你光明的未来。",
"高考加油！你一定能行的！你要相信自己！对自己要有信心！我等你的好消息！",
"高考加油！我知道你正在经历人生中的一次重要挑战，或许你有焦虑、有恐惧，也有激动，但我想说，请不要忘记身边所有关爱着你的人，我们是你坚强的后盾。",
"高考加油！既然选择了要走的路，就一往无前地坚持下去，相信只要有信心，只要有勇气，就一定能掌握自己的前途和命运，成为真正的强者。",
"高考加油！当人生面对许多选择的时候，我们需要谨慎；当我们没有选择的时候，就把压力当挑战，给自己一个信心：这个世界上只要有人能在这条路上走得很好，我就能走好！",
"高考加油！亲爱的孩子，妈妈希望你能考上理想的大学，妈妈相信，在你的努力下，在你的坚持下，你一定能成功，妈妈永远支持你，永远爱你！",
"高考加油！高考的日子在逼近，希望你能调整好自己的心态，好好发挥，考上理想的公大！我在为你祝福。一定会成功的！",
"高考加油！六月鲜花竞相绽，捷报纷纷似花瓣。花香溢人醉心田，鲜花献送状元郎。十年苦读梦实现，名校专业细筛选。求索路上迈新步，博读书海天下闯。愿你大展才华。",
"高考加油！为你倒数，还有几个小时就要上战场了，希望你能够放松心情，不要紧张。我知道你平时学习一向都很努力，学得很不错，相信你考好成绩是没问题的！",
"高考加油！眼看高考就要来了，向前看，相信自己，我会在远方为你送去最真挚的祝福，付出就会有收获的！放松心情，去迎接挑战，我相信你，你一定是最出色的！",
"高考加油！这两天的考试过程中，要调整好自己的情绪，考过一门，就不要再想了，重要的是吃好，喝好，休息好，营造一种良好的应考氛围，祝愿你考试顺利！",
"高考加油！全国高考日到了，愿你执才高八斗生辉笔，饮才思万千智慧酒，带气定神闲满面笑，拥胸中成竹满怀志，书锦绣嫣然好答卷，定折取桂冠来题名。",
"高考加油！就要考试了，希望我的问候短信会为你送去一份轻松清爽的心情，不要太紧张哦！不然可会把答案忘掉的！我在这里支持着你，鼓励着你，为你祝福！",
"高考加油！孩子，你是爸爸妈妈生命的延续，也是爸爸妈妈未来的希望，你的一举一动时刻牵动着爸爸妈妈的心。今后的路还很长，你要勇敢地面对任何挑战，爸爸妈妈是你坚实的后盾。",
"高考加油！这是一个考试顺利符哦，考试的人收到后会考出理想的成绩，愿你带着我的祝福，怀着一个好心情，轻松面对考试！",
"高考加油！在即将高考的最后几天里，愿尽最大的可能，在远方倾诉我的祝福，相信自己的梦想与汗水，成功与好运相伴，高考大捷！",
"高考加油！祝愿天下所有考生开心度过高考。祝福你们旗开得胜，取得美好佳绩。平心对待高考，你们是最棒的！仁慈的上帝会祝福你们的，相信自己，一定能行！",
"高考加油！你就要高考了，我在百度搜出千百条祝福语，在搜狗找到无数句吉祥话，但我觉得都太俗。我只想真诚地对你说：得心应手高考顺利，十年努力今日成功！"
];
// 颜色库，用于标语背景
const colors = [
'bg-blue-50', 'bg-indigo-50', 'bg-purple-50',
'bg-pink-50', 'bg-red-50', 'bg-orange-50',
'bg-yellow-50', 'bg-green-50', 'bg-teal-50',
'bg-cyan-50'
];
// 获取DOM元素
const generateBtn = document.getElementById('generateBtn');
const messageCard = document.getElementById('messageCard');
// 生成随机数
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 生成随机标语
function generateMessage() {
// 随机选择一条标语
const randomIndex = getRandomInt(0, messages.length - 1);
const message = messages[randomIndex];
// 随机选择一种颜色
const randomColor = colors[getRandomInt(0, colors.length - 1)];
// 移除所有现有类并添加新的背景颜色类
messageCard.className = `rounded-2xl shadow-xl p-8 mb-12 min-h-[250px] flex items-center justify-center card-appear ${randomColor}`;
// 更新标语内容
messageCard.innerHTML = `
<div class="text-center">
<i class="fa fa-heart text-primary text-4xl mb-4 animate-pulse"></i>
<p class="text-gray-800 text-xl md:text-2xl font-medium leading-relaxed">${message}</p>
</div>
`;
// 添加动画效果
messageCard.style.opacity = '0';
messageCard.style.transform = 'translateY(20px)';
// 触发重排，然后应用动画
setTimeout(() => {
messageCard.style.opacity = '1';
messageCard.style.transform = 'translateY(0)';
}, 50);
// 添加庆祝效果
createConfetti();
}
// 创建庆祝彩屑效果
function createConfetti() {
const confettiCount = 150;
const container = document.body;
// 清除现有的彩屑
const existingConfetti = document.querySelectorAll('.confetti');
existingConfetti.forEach(confetti => confetti.remove());
// 创建新的彩屑
for (let i = 0; i < confettiCount; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
// 随机位置
const left = Math.random() * 100;
confetti.style.left = `${left}vw`;
// 随机颜色
const colors = ['#165DFF', '#4080FF', '#6AA1FF', '#FF7D00', '#FF9A3C', '#FFB779'];
const color = colors[Math.floor(Math.random() * colors.length)];
confetti.style.backgroundColor = color;
// 随机形状
const shape = Math.random() > 0.5 ? 'square' : 'circle';
if (shape === 'circle') {
confetti.style.borderRadius = '50%';
}
// 随机大小
const size = Math.random() * 10 + 5;
confetti.style.width = `${size}px`;
confetti.style.height = `${size}px`;
// 随机旋转角度
const rotation = Math.random() * 360;
confetti.style.transform = `rotate(${rotation}deg)`;
// 随机动画延迟和持续时间
const delay = Math.random() * 3;
const duration = Math.random() * 3 + 3;
confetti.style.animationDelay = `${delay}s`;
confetti.style.animationDuration = `${duration}s`;
// 随机水平移动
const horizontalMove = Math.random() * 200 - 100;
confetti.style.setProperty('--horizontal-move', `${horizontalMove}px`);
container.appendChild(confetti);
}
}
// 按钮点击事件
generateBtn.addEventListener('click', generateMessage);
// 初始显示
window.addEventListener('load', () => {
setTimeout(() => {
messageCard.style.opacity = '1';
messageCard.style.transform = 'translateY(0)';
}, 300);
});
</script>
</body>
</html>