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

這個高考助力標語生成器具有以下特點：

視覺設計：采用了藍色為主色調，搭配漸變背景和圓形裝飾元素，營造出寧靜而充滿希望的氛圍，非常適合高考主題。
標語生成：內置了超過 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>