当前位置：首页 > news >正文

高考加油！UI界面生成器！

news 来源：原创 2025/6/2 15:39:55

这个高考助力标语生成器具有以下特点：

视觉设计：采用了蓝色为主色调，搭配渐变背景和圆形装饰元素，营造出宁静而充满希望的氛围，非常适合高考主题。
标语生成：内置了超过 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/font-awesome@4.7.0/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复制即可！！

<!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/font-awesome@4.7.0/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>