每日一句HTML源码：让每一天从一句温暖的句子开始
发布时间
阅读量：
阅读量
每日一句HTML源码：让每一天从一句温暖的句子开始
在这个快节奏的数字时代，一个简单而优雅的网页可以成为我们日常生活中的精神绿洲。下面我将创建一个完整的"每日一句"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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
color: #fff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.container {
width: 100%;
max-width: 800px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
text-align: center;
position: relative;
overflow: hidden;
}
.container::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
z-index: -1;
}
header {
margin-bottom: 40px;
}
h1 {
font-size: 3rem;
margin-bottom: 10px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
background: linear-gradient(45deg, #fff, #ffd700);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.subtitle {
font-size: 1.2rem;
opacity: 0.9;
margin-bottom: 30px;
}
.date-card {
background: rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 20px;
margin: 0 auto 40px;
width: fit-content;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.weekday {
font-size: 2rem;
font-weight: bold;
margin-bottom: 5px;
}
.date {
font-size: 1.2rem;
opacity: 0.9;
}
.quote-container {
background: rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 30px;
margin-bottom: 40px;
position: relative;
transition: all 0.5s ease;
}
.quote-container:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.25);
}
.quote {
font-size: 2.2rem;
font-style: italic;
line-height: 1.4;
margin-bottom: 25px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.translation {
font-size: 1.5rem;
line-height: 1.5;
opacity: 0.95;
}
.quote::before, .quote::after {
content: '"';
font-size: 3rem;
opacity: 0.5;
}
.controls {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.btn {
padding: 15px 30px;
border: none;
border-radius: 50px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.btn:active {
transform: translateY(0);
}
.new-btn {
background: linear-gradient(45deg, #4CAF50, #8BC34A);
color: white;
}
.speak-btn {
background: linear-gradient(45deg, #2196F3, #03A9F4);
color: white;
}
.share-btn {
background: linear-gradient(45deg, #9C27B0, #E91E63);
color: white;
}
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.feature-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.2);
}
.feature-icon {
font-size: 2.5rem;
margin-bottom: 15px;
color: #ffd700;
}
.feature-title {
font-size: 1.4rem;
margin-bottom: 10px;
font-weight: bold;
}
.feature-desc {
font-size: 1rem;
opacity: 0.9;
}
.summary {
background: rgba(0, 0, 0, 0.2);
border-radius: 15px;
padding: 25px;
margin-top: 20px;
}
.summary-title {
font-size: 1.8rem;
margin-bottom: 20px;
color: #ffd700;
}
.summary-text {
font-size: 1.2rem;
line-height: 1.7;
margin-bottom: 20px;
}
.call-to-action {
font-size: 1.4rem;
font-weight: bold;
margin-top: 20px;
background: linear-gradient(45deg, #FF5722, #FF9800);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
footer {
margin-top: 40px;
font-size: 0.9rem;
opacity: 0.8;
}
@media (max-width: 600px) {
.container {
padding: 20px;
}
h1 {
font-size: 2.2rem;
}
.quote {
font-size: 1.8rem;
}
.translation {
font-size: 1.3rem;
}
.btn {
padding: 12px 20px;
font-size: 1rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1><i class="fas fa-quote-left"></i> 每日一句 <i class="fas fa-quote-right"></i></h1>
<p class="subtitle">让每一天从一句温暖的句子开始</p>
</header>
<div class="date-card">
<div class="weekday">星期一</div>
<div class="date">2025年4月7日</div>
</div>
<div class="quote-container">
<div class="quote">Laughter revives a tired spirit and mends a broken heart.</div>
<div class="translation">笑声能量燃疲惫的心灵，修复破碎的情感。</div>
</div>
<div class="controls">
<button class="btn new-btn" id="newQuoteBtn">
<i class="fas fa-sync-alt"></i> 换一句
</button>
<button class="btn speak-btn" id="speakBtn">
<i class="fas fa-volume-up"></i> 朗读句子
</button>
<button class="btn share-btn" id="shareBtn">
<i class="fas fa-share-alt"></i> 分享给朋友
</button>
</div>
<div class="features">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-sun"></i>
</div>
<h3 class="feature-title">早晨激励</h3>
<p class="feature-desc">每天早晨打开网页，用一句话开启充满希望的一天</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-book"></i>
</div>
<h3 class="feature-title">学习英语</h3>
<p class="feature-desc">通过中英文对照和语音功能，提升你的英语水平</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-heart"></i>
</div>
<h3 class="feature-title">放松心情</h3>
<p class="feature-desc">忙碌一天后，听一句温暖的句子，放松身心</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-share"></i>
</div>
<h3 class="feature-title">分享感悟</h3>
<p class="feature-desc">将这句话分享给朋友，传递正能量</p>
</div>
</div>
<div class="summary">
<h2 class="summary-title">每日一句：一种生活态度</h2>
<p class="summary-text">每日一句不仅仅是一个网页，它是一种生活的态度。它提醒我们，每一天都值得被认真对待，每一个瞬间都值得被珍惜。无论你是想激励自己，还是寻找片刻的宁静，这个网页都能成为你生活中的小确幸。</p>
<p class="summary-text">在这个信息爆炸的时代，我们常常被各种碎片化信息淹没。每日一句提供了一个简单而专注的体验，让你每天只需要花一分钟的时间，收获一份心灵的滋养。</p>
<p class="call-to-action">快来试试吧，让每日一句成为你生活中的小习惯，让每一天都充满意义！</p>
</div>
<footer>
<p>© 2025 每日一句 - 温暖你的每一天</p>
</footer>
</div>
<script>
// 获取DOM元素
const newQuoteBtn = document.getElementById('newQuoteBtn');
const speakBtn = document.getElementById('speakBtn');
const shareBtn = document.getElementById('shareBtn');
const quoteElement = document.querySelector('.quote');
const translationElement = document.querySelector('.translation');
const weekdayElement = document.querySelector('.weekday');
const dateElement = document.querySelector('.date');
// 名言库
const quotes = [
{
en: "The best way to predict the future is to create it.",
cn: "预测未来的最好方式就是去创造它。"
},
{
en: "Every day may not be good, but there is something good in every day.",
cn: "也许不是每一天都那么美好，但每一天都有美好的东西存在。"
},
{
en: "Life is 10% what happens to us and 90% how we react to it.",
cn: "生活有10%是发生在我们身上的事情，90%是我们对这些事情的反应。"
},
{
en: "The only way to do great work is to love what you do.",
cn: "成就伟业的唯一途径就是热爱自己的事业。"
},
{
en: "Happiness is not something ready made. It comes from your own actions.",
cn: "幸福不是现成的，它来源于你自己的行动。"
},
{
en: "Laughter revives a tired spirit and mends a broken heart.",
cn: "笑声能量燃疲惫的心灵，修复破碎的情感。"
},
{
en: "The greatest glory in living lies not in never falling, but in rising every time we fall.",
cn: "生命中最伟大的光辉不在于永不坠落，而在于坠落后总能再度升起。"
}
];
// 星期名称
const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
// 更新日期
function updateDate() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const date = now.getDate();
const day = now.getDay();
weekdayElement.textContent = weekdays[day];
dateElement.textContent = `${year}年${month}月${date}日`;
}
// 随机获取一句名言
function getRandomQuote() {
const randomIndex = Math.floor(Math.random() * quotes.length);
return quotes[randomIndex];
}
// 更新名言
function updateQuote() {
const quote = getRandomQuote();
quoteElement.textContent = quote.en;
translationElement.textContent = quote.cn;
}
// 朗读功能
function speakQuote() {
const utterance = new SpeechSynthesisUtterance(quoteElement.textContent);
utterance.lang = 'en-US';
utterance.rate = 0.9;
utterance.pitch = 1;
speechSynthesis.speak(utterance);
}
// 分享功能
function shareQuote() {
if (navigator.share) {
navigator.share({
title: '每日一句',
text: `${quoteElement.textContent}\n${translationElement.textContent}`,
url: window.location.href
}).catch(console.error);
} else {
alert('分享功能在您的浏览器中不可用，请手动复制以下内容：\n\n' +
quoteElement.textContent + '\n' +
translationElement.textContent);
}
}
// 事件监听
newQuoteBtn.addEventListener('click', updateQuote);
speakBtn.addEventListener('click', speakQuote);
shareBtn.addEventListener('click', shareQuote);
// 初始化
updateDate();
updateQuote();
// 背景动画增强
document.addEventListener('mousemove', (e) => {
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;
document.body.style.backgroundPosition = `${x * 100}% ${y * 100}%`;
});
</script>
</body>
</html>
html
源码功能介绍
这个"每日一句"HTML页面设计精美，功能丰富，适合各种场景使用：
主要功能
- 动态日期显示 ：自动显示当前星期和日期
- 名言展示 ：中英文对照的名言警句
- 随机更换 ：点击"换一句"按钮获取新的名言
- 语音朗读 ：点击"朗读句子"按钮播放英文原句发音
- 分享功能 ：一键分享当前句子到社交媒体
- 响应式设计 ：在各种设备上都能完美显示
应用场景
早晨激励 ：每天早晨打开网页，用一句充满智慧的话语开启新的一天。页面渐变背景模拟日出效果，带来视觉上的温暖感受。
学习英语 ：通过中英文对照和语音功能，用户可以在欣赏名言的同时提升英语能力。点击朗读按钮可以听到纯正的英文发音。
放松心情 ：忙碌一天后，打开页面听一句温暖的句子，渐变背景的舒缓动画帮助放松身心。
分享感悟 ：发现特别有共鸣的句子，可以使用分享功能发送给朋友，传递正能量。
设计亮点
视觉美学 ：
* 动态渐变背景随时间变化
* 磨砂玻璃效果增强现代感
* 优雅的字体和排版设计
* 悬停动画提升交互体验用户体验 ：
* 响应式设计适配所有设备
* 简洁直观的操作界面
* 平滑的过渡动画
* 交互式背景跟随鼠标移动技术实现 ：
* 使用CSS渐变和动画创建动态背景
* 采用backdrop-filter实现磨砂玻璃效果
* 利用Web Speech API实现文本朗读
* 使用Web Share API实现分享功能总结
每日一句不仅仅是一个网页，它是一种生活的态度。它提醒我们，每一天都值得被认真对待，每一个瞬间都值得被珍惜。在这个信息爆炸的时代，它提供了一个简单而专注的体验，让你每天只需要花一分钟的时间，收获一份心灵的滋养。
无论你是想激励自己开始新的一天，还是寻找片刻的宁静，这个网页都能成为你生活中的小确幸。它融合了美学与功能，在提供精神滋养的同时，也是一个学习工具和社交媒介。
让每日一句成为你生活中的小习惯，让每一天都充满意义！ 复制上面的完整代码到HTML文件中即可立即体验。
全部评论 (0)
还没有任何评论哟~