#精品
简单的网站首页寄语卡片

云码君免费源码

2025-07-03 0 917

源码介绍

位置与样式：
- 固定在页面右下角
- 半透明白色背景，圆角设计
- 悬停时有轻微上浮效果
内容：
- 包含标题”每日寄语“
- 随机显示的寄语内容
- 底部署名
交互功能：
- 右上角有关闭按钮，点击可隐藏卡片
- JavaScript实现随机显示不同寄语
- 可以设置定时更换寄语

自定义建议

修改quotes数组中的内容，添加您喜欢的寄语
调整CSS中的颜色、大小等样式以匹配您的网站风格
可以添加本地存储功能，记住用户是否关闭了卡片
可以添加动画效果，使卡片出现和消失更平滑

把这段源码添加到你首页网站：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站寄语卡片</title>
    <style>
        .quote-card {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 250px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 15px;
            font-family: 'Arial', sans-serif;
            transition: all 0.3s ease;
            z-index: 1000;
        }
        
        .quote-card:hover {
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            transform: translateY(-5px);
        }
        
        .quote-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .quote-icon {
            font-size: 24px;
            margin-right: 10px;
            color: #4a6fa5;
        }
        
        .quote-title {
            font-weight: bold;
            font-size: 18px;
            color: #333;
        }
        
        .quote-content {
            font-size: 14px;
            line-height: 1.5;
            color: #666;
            margin-bottom: 10px;
        }
        
        .quote-footer {
            font-size: 12px;
            color: #999;
            text-align: right;
        }
        
        .close-btn {
            position: absolute;
            top: 5px;
            right: 10px;
            cursor: pointer;
            color: #aaa;
            font-size: 16px;
        }
        
        .close-btn:hover {
            color: #777;
        }
    </style>
</head>
<body>
    <div class="quote-card">
        <span class="close-btn" onclick="this.parentElement.style.display='none'">×</span>
        <div class="quote-header">
            <span class="quote-icon">✍️</span>
            <span class="quote-title">每日寄语</span>
        </div>
        <div class="quote-content">
            生活就像一本书，愚蠢的人草草翻过，聪明的人细细品读。愿你珍惜每一天，活出精彩人生！
        </div>
        <div class="quote-footer">
            —— 精码云库
        </div>
    </div>

    <script>
        // 可以在这里添加更多寄语，实现每日更换
        const quotes = [
            "生活就像一本书，愚蠢的人草草翻过，聪明的人细细品读。愿你珍惜每一天，活出精彩人生！",
            "每一个清晨都是一个新的开始，每一份努力都不会被辜负。",
            "成功不是将来才有的，而是从决定去做的那一刻起，持续累积而成。",
            "世界上最美的风景，就是你努力的样子。",
            "愿你眼中总有光芒，活成自己想要的模样。"
        ];
        
        // 随机选择一条寄语
        function changeQuote() {
            const quoteElement = document.querySelector('.quote-content');
            const randomIndex = Math.floor(Math.random() * quotes.length);
            quoteElement.textContent = quotes[randomIndex];
        }
        
        // 页面加载时随机选择一条寄语
        window.onload = changeQuote;
        
        // 也可以设置定时更换
        // setInterval(changeQuote, 86400000); // 24小时更换一次
    </script>
</body>
</html>