html5 CSS3 实现白天黑夜效果

轩尼诗

于 2024-08-15 15:31:09 发布

阅读量145

点赞数 3

分类专栏： IT随记文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/hennessy23/article/details/141223650

版权

IT随记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这个简单的示例展示了如何使用HTML和CSS来创建一个白天和黑夜主题切换的效果。通过JavaScript函数toggleTheme来切换body元素的类，从而改变背景色和文本颜色。这个例子可以作为开发者实现类似功能的参考。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day and Night Theme Toggle</title>
<style>
  body {
    transition: background-color 0.3s, color 0.3s;
  }
  .day {
    background-color: #f9f9d6; /* 浅黄色背景适合白天 */
    color: #333; /* 深灰色文本适合白天 */
  }
  .night {
    background-color: #2e384d; /* 深蓝色背景适合夜晚 */
    color: #f8f8f2; /* 浅灰色文本适合夜晚 */
  }
</style>
</head>
<body class="day">
 
<button onclick="toggleTheme()">切换主题</button>
 
<script>
function toggleTheme() {
  if (body.classList.contains('day')) {
    body.classList.remove('day');
    body.classList.add('night');
  } else {
    body.classList.remove('night');
    body.classList.add('day');
  }
}
</script>
 
</body>
</html>