精美的名言卡片网站

小唐
2025•10•19 14:40:17发布
主要功能

随机名言展示：内置 15 句经典名言，包括《周易》、《论语》、李白、杜甫等名家作品
唯美配图：7 张高质量自然风景图片，每次刷新随机搭配
多种交互方式：
- 点击右上角刷新按钮
- 移动端底部专门的刷新按钮
- 按空格键快速刷新
- 滑动手势（手机端）
设计亮点

现代卡片设计：玻璃质感效果，优雅的渐变背景
粒子动画背景：营造梦幻氛围
响应式布局：完美适配各种设备屏幕
平滑过渡动画：文字淡入淡出效果
深色主题：确保名言文字清晰可读
使用方法

打开网站即可看到随机名言卡片
点击刷新按钮或按空格键获取新的名言
名言和背景图片都会随机变化
支持手机滑动手势刷新
这个名言卡片网站结合了经典文化和现代设计，为您提供优雅的阅读体验。每一句名言都经过精心挑选，配图也都是高质量的自然风景，希望能给您带来灵感和美好的心情！
<!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: '#6366f1',
                        secondary: '#8b5cf6',
                        accent: '#f59e0b',
                        warm: '#f97316',
                        cool: '#06b6d4'
                    },
                    fontFamily: {
                        chinese: ['PingFang SC', 'Microsoft YaHei', 'sans-serif']
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.08);
            }
            .glass-effect {
                backdrop-filter: blur(10px);
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(255, 255, 255, 0.2);
            }
            .text-gradient {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }
        }
    </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-purple-50 via-blue-50 to-pink-50 font-chinese overflow-x-hidden">
    <!-- 粒子背景 -->
    <div id="particles" class="fixed inset-0 z-0 pointer-events-none"></div>
    
    <!-- 主容器 -->
    <div class="relative z-10 min-h-screen flex items-center justify-center p-4">
        <!-- 名言卡片 -->
        <div id="quote-card" class="w-full max-w-4xl mx-auto">
            <!-- 卡片容器 -->
            <div class="relative rounded-3xl overflow-hidden card-shadow transition-all duration-1000 ease-in-out transform hover:scale-[1.02]">
                <!-- 背景图片 -->
                <div id="background-image" class="absolute inset-0 bg-cover bg-center transition-all duration-1500 ease-in-out">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>
                </div>
                
                <!-- 卡片内容 -->
                <div class="relative z-10 p-8 md:p-12 lg:p-16">
                    <!-- 装饰图标 -->
                    <div class="absolute top-8 right-8 text-white/30 text-4xl">
                        <i class="fa fa-quote-right"></i>
                    </div>
                    
                    <!-- 名言文本 -->
                    <div class="mb-8">
                        <p id="quote-text" class="text-2xl md:text-3xl lg:text-4xl font-light text-white leading-relaxed transition-all duration-1000 ease-in-out opacity-0 transform translate-y-8">
                            天行健，君子以自强不息。地势坤，君子以厚德载物。
                        </p>
                    </div>
                    
                    <!-- 名言出处 -->
                    <div class="flex justify-between items-end">
                        <div>
                            <p id="quote-author" class="text-lg md:text-xl text-white/90 font-medium transition-all duration-1000 ease-in-out opacity-0 transform translate-y-8">
                                — 《周易》
                            </p>
                        </div>
                        
                        <!-- 刷新按钮 -->
                        <button id="refresh-btn" class="glass-effect text-white p-4 rounded-full hover:bg-white/20 transition-all duration-300 ease-in-out hover:scale-110 hover:rotate-12">
                            <i class="fa fa-refresh text-xl"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 底部信息 -->
            <div class="mt-8 text-center">
                <p class="text-gray-600 text-sm">点击刷新按钮获取新的名言卡片</p>
                <p class="text-gray-400 text-xs mt-2">每日一句，感悟人生</p>
            </div>
        </div>
    </div>
    
    <!-- 移动端导航 -->
    <div class="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-20 lg:hidden">
        <button id="mobile-refresh" class="bg-white shadow-lg p-4 rounded-full hover:bg-gray-50 transition-all duration-300 ease-in-out hover:scale-110">
            <i class="fa fa-refresh text-primary text-xl"></i>
        </button>
    </div>
    
    <script>
        // 名言数据
        const quotes = [
            {
                text: "天行健，君子以自强不息。地势坤，君子以厚德载物。",
                author: "— 《周易》"
            },
            {
                text: "路漫漫其修远兮，吾将上下而求索。",
                author: "— 屈原《离骚》"
            },
            {
                text: "学而不思则罔，思而不学则殆。",
                author: "— 孔子《论语》"
            },
            {
                text: "业精于勤，荒于嬉；行成于思，毁于随。",
                author: "— 韩愈《进学解》"
            },
            {
                text: "不积跬步，无以至千里；不积小流，无以成江海。",
                author: "— 荀子《劝学》"
            },
            {
                text: "人生自古谁无死，留取丹心照汗青。",
                author: "— 文天祥《过零丁洋》"
            },
            {
                text: "莫愁前路无知己，天下谁人不识君。",
                author: "— 高适《别董大》"
            },
            {
                text: "长风破浪会有时，直挂云帆济沧海。",
                author: "— 李白《行路难》"
            },
            {
                text: "海内存知己，天涯若比邻。",
                author: "— 王勃《送杜少府之任蜀州》"
            },
            {
                text: "宝剑锋从磨砺出，梅花香自苦寒来。",
                author: "— 《警世贤文》"
            },
            {
                text: "天生我材必有用，千金散尽还复来。",
                author: "— 李白《将进酒》"
            },
            {
                text: "沉舟侧畔千帆过，病树前头万木春。",
                author: "— 刘禹锡《酬乐天扬州初逢席上见赠》"
            },
            {
                text: "不识庐山真面目，只缘身在此山中。",
                author: "— 苏轼《题西林壁》"
            },
            {
                text: "会当凌绝顶，一览众山小。",
                author: "— 杜甫《望岳》"
            },
            {
                text: "少壮不努力，老大徒伤悲。",
                author: "— 《长歌行》"
            }
        ];
        
        // 背景图片
        const backgroundImages = [
            "https://p3-search.byteimg.com/obj/tos-cn-i-qvj2lq49k0/d1ca780af53d46dcaac1bc29e40f0bbe",
            "https://p3-search.byteimg.com/obj/labis/7479cb74117f34a387a13d741d5621c5",
            "https://p3-search.byteimg.com/obj/tos-cn-i-qvj2lq49k0/9f7da002fe04407da10d114c898c6a5b",
            "https://p3-search.byteimg.com/obj/mosaic-legacy/31c700001cb7fd248232",
            "https://p3-search.byteimg.com/obj/tos-cn-i-qvj2lq49k0/83c3d3e781734ebabd9c8bd997500770",
            "https://p3-search.byteimg.com/obj/pgc-image/347ee1f4a5af443c83d75a97a5022cfb",
            "https://p3-search.byteimg.com/obj/mosaic-legacy/4860002f87ff0eb5e38"
        ];
        
        // 生成随机名言
        function getRandomQuote() {
            const randomIndex = Math.floor(Math.random() * quotes.length);
            return quotes[randomIndex];
        }
        
        // 生成随机背景图片
        function getRandomBackground() {
            const randomIndex = Math.floor(Math.random() * backgroundImages.length);
            return backgroundImages[randomIndex];
        }
        
        // 更新名言卡片
        function updateQuoteCard() {
            const quote = getRandomQuote();
            const background = getRandomBackground();
            
            const quoteText = document.getElementById('quote-text');
            const quoteAuthor = document.getElementById('quote-author');
            const backgroundImage = document.getElementById('background-image');
            
            // 动画效果
            quoteText.style.opacity = '0';
            quoteText.style.transform = 'translateY(8px)';
            quoteAuthor.style.opacity = '0';
            quoteAuthor.style.transform = 'translateY(8px)';
            
            setTimeout(() => {
                // 更新内容
                quoteText.textContent = quote.text;
                quoteAuthor.textContent = quote.author;
                backgroundImage.style.backgroundImage = `url(${background})`;
                
                // 显示动画
                setTimeout(() => {
                    quoteText.style.opacity = '1';
                    quoteText.style.transform = 'translateY(0)';
                    quoteAuthor.style.opacity = '1';
                    quoteAuthor.style.transform = 'translateY(0)';
                }, 300);
            }, 500);
        }
        
        // 创建粒子背景
        function createParticles() {
            const container = document.getElementById('particles');
            const particleCount = window.innerWidth > 768 ? 50 : 25;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'absolute w-1 h-1 bg-white/20 rounded-full';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.top = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 5 + 's';
                particle.style.animation = `float ${10 + Math.random() * 10}s infinite linear`;
                container.appendChild(particle);
            }
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 创建粒子背景
            createParticles();
            
            // 初始化名言卡片
            setTimeout(() => {
                updateQuoteCard();
            }, 500);
            
            // 刷新按钮事件
            document.getElementById('refresh-btn').addEventListener('click', updateQuoteCard);
            document.getElementById('mobile-refresh').addEventListener('click', updateQuoteCard);
            
            // 键盘快捷键支持
            document.addEventListener('keydown', function(e) {
                if (e.key === ' ') {
                    e.preventDefault();
                    updateQuoteCard();
                }
            });
            
            // 触摸滑动支持
            let touchStartX = 0;
            let touchStartY = 0;
            
            document.addEventListener('touchstart', function(e) {
                touchStartX = e.changedTouches[0].screenX;
                touchStartY = e.changedTouches[0].screenY;
            });
            
            document.addEventListener('touchend', function(e) {
                const touchEndX = e.changedTouches[0].screenX;
                const touchEndY = e.changedTouches[0].screenY;
                
                const diffX = touchStartX - touchEndX;
                const diffY = touchStartY - touchEndY;
                
                if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
                    updateQuoteCard();
                }
            });
        });
    </script>
    
    <style>
        @keyframes float {
            0% {
                transform: translateY(0) translateX(0);
                opacity: 0.2;
            }
            50% {
                transform: translateY(-20px) translateX(10px);
                opacity: 0.4;
            }
            100% {
                transform: translateY(0) translateX(0);
                opacity: 0.2;
            }
        }
        
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
        }
        
        ::-webkit-scrollbar-thumb {
            background: rgba(99, 102, 241, 0.3);
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(99, 102, 241, 0.5);
        }
        
        /* 平滑滚动 */
        html {
            scroll-behavior: smooth;
        }
        
        /* 加载动画 */
        body {
            opacity: 0;
            animation: fadeIn 1s ease-in-out forwards;
        }
        
        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }
    </style>
</body>
</html>
评分
欢迎为Ta评分
我要打赏