HTML+CSS+JS:日夜交替

news2024/9/24 6:12:29

效果演示

46-日夜交替.gif

实现了一个简单的日夜交替效果的动画。页面中包含了太阳、月亮和海洋的元素,通过切换按钮可以切换页面的主题,从白天切换到黑夜,或者从黑夜切换到白天。

Code

<div class="btn-box">
    <div class="sunBtn">
        <span class="iconfont icon-taiyang"></span> 白天模式
    </div>
    <div class="moonBtn">
        <span class="iconfont icon-moon"></span> 黑夜模式
    </div>
</div>

<div class="dark" id="container">
    <div class="bg"></div>
    <div class="moon-box">
        <div class="moon"></div>
    </div>
    <div class="sun-box">
        <div class="sun"></div>
    </div>
    <div class="sea"></div>
</div>
```css
body {
  margin: 0; /* 设置页面边距为0 */
  padding: 0; /* 设置页面内边距为0 */
}

#container {
  height: 100vh; /* 设置容器高度为视口高度 */
}

.bg {
  position: absolute; /* 设置背景元素绝对定位 */
  width: 100%; /* 设置宽度为100% */
  height: 100%; /* 设置高度为100% */
}

.sun {
  position: absolute; /* 设置太阳元素绝对定位 */
  top: 50%; /* 设置顶部距离为50% */
  left: 50%; /* 设置左侧距离为50% */
  transform: translate(-50%, -50%); /* 居中显示 */
  width: 600px; /* 设置宽度为600px */
  height: 600px; /* 设置高度为600px */
  background-color: orange; /* 设置背景颜色为橙色 */
  border-radius: 50%; /* 设置圆角为50%(圆形) */
}

.moon {
  position: absolute; /* 设置月亮元素绝对定位 */
  top: 50%; /* 设置顶部距离为50% */
  left: 50%; /* 设置左侧距离为50% */
  transform: translate(calc(-50% + -160px), calc(-50% + -180px)); /* 居中显示 */
  width: 600px; /* 设置宽度为600px */
  height: 600px; /* 设置高度为600px */
  box-shadow: 160px 180px 0 cyan; /* 使用阴影绘制月亮 */
  border-radius: 50%; /* 设置圆角为50%(圆形) */
}

.sea {
  position: absolute; /* 设置海洋元素绝对定位 */
  bottom: 0; /* 设置底部距离为0 */
  width: 100%; /* 设置宽度为100% */
  height: 35%; /* 设置高度为视口高度的35% */
  backdrop-filter: blur(100px); /* 使用背景模糊效果 */
  -webkit-backdrop-filter: blur(100px); /* 兼容性设置 */
  z-index: 100; /* 设置层级为100 */
}

.sun-box,
.moon-box,
.bg {
  transition: 1s ease-in-out; /* 设置过渡效果为1秒,缓入缓出 */
}

.sun-box,
.moon-box {
  position: relative; /* 设置太阳和月亮盒子相对定位 */
  overflow: hidden; /* 内容溢出隐藏 */
}

.light .sun-box {
  height: 100%; /* 设置太阳盒子高度为100% */
}
.light .moon-box {
  height: 0; /* 设置月亮盒子高度为0 */
}
.light .bg {
  background-color: #ffeea2; /* 设置白天背景颜色 */
}

.dark .sun-box {
  height: 0; /* 设置太阳盒子高度为0 */
}
.dark .moon-box {
  height: 100%; /* 设置月亮盒子高度为100% */
}
dark .bg {
  background-color: #040720; /* 设置黑夜背景颜色 */
}

.btn-box {
  position: absolute; /* 设置按钮盒子绝对定位 */
  top: 5px; /* 设置顶部距离为5px */
  right: 100px; /* 设置右侧距离为100px */
  z-index: 999; /* 设置层级为999 */
  display: flex; /* 设置为弹性布局 */
}

.btn-box div {
  width: 90px; /* 设置宽度为90px */
  height: 40px; /* 设置高度为40px */
  background: rgba(255, 255, 255, 0.7); /* 设置背景颜色为白色带透明度 */
  margin: 5px; /* 设置外边距为5px */
  line-height: 40px; /* 设置行高为40px */
  text-align: center; /* 文本居中 */
  font-size: 14px; /* 设置字体大小为14px */
  border-radius: 5px; /* 设置圆角为5px */
  cursor: pointer; /* 鼠标指针样式为手型 */
}

.btn-box div:hover {
  background: #fff; /* 鼠标悬停时背景颜色变为白色 */
}
const sunBtn = document.querySelector('.sunBtn')
const moonBtn = document.querySelector('.moonBtn')

sunBtn.addEventListener('click', function () {
  document.getElementById('container').setAttribute('class', 'light');
})

moonBtn.addEventListener('click', function () {
  document.getElementById('container').setAttribute('class', 'dark');
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1487056.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Docker将本地的镜像上传到私有仓库

使用register镜像创建私有仓库 [rootopenEuler-node1 ~]# docker run --restartalways -d -p 5000:5000 -v /opt/data/regostry:/var/lib/registry registry:2[rootopenEuler-node1 ~]# docker images REPOSITORY TAG IMAGE…

【数据结构与算法】常见排序算法(Sorting Algorithm)

文章目录 相关概念1. 冒泡排序&#xff08;Bubble Sort&#xff09;2. 直接插入排序&#xff08;Insertion Sort&#xff09;3. 希尔排序&#xff08;Shell Sort&#xff09;4. 直接选择排序&#xff08;Selection Sort&#xff09;5. 堆排序&#xff08;Heap Sort&#xff09;…

【代码】Android|判断asserts下的文件存在与否,以及普通文件存在与否

作者版本&#xff1a;Android 11及以上 主要是发现网上没有完整的、能跑的代码&#xff0c;不知道怎么回事&#xff0c;GPT给我重写的。我只能保证这个代码尊嘟能跑&#xff0c;不像其他的缺胳膊少腿的。 asserts 贴一下结果&#xff1a; boolean isAssertFileExists(String …

CNN-LSTM-Attention混合神经网络归时序预测的MATLAB实现(源代码)

CNN-LSTM-Attention介绍&#xff1a; CNN-LSTM-Attention混合神经网络是一种结合了卷积神经网络&#xff08;CNN&#xff09;、长短期记忆神经网络&#xff08;LSTM&#xff09;和注意力机制&#xff08;Attention&#xff09;的模型。这种混合神经网络结合了CNN对空间特征的提…

云畅科技携手飞腾打造智慧园区信创低代码综合解决方案

01 方案概述 随着国家对信创产业的日益重视与大力支持&#xff0c;信创行业的产业化进程正在不断加快。智慧园区&#xff0c;作为信创产业蓬勃发展的核心载体与战略平台&#xff0c;正日益凸显其重要性。与此同时&#xff0c;在政策引导和市场需求的双重驱动下&#xff0c;智慧…

【LeetCode】升级打怪之路 Day 12:单调队列

今日题目&#xff1a; 239. 滑动窗口最大值 | LeetCode 今天学习了单调队列这种特殊的数据结构&#xff0c;思路很新颖&#xff0c;值得学习。 Problem&#xff1a;单调队列 【必会】 与单调栈类似&#xff0c;单调队列也是一种特殊的数据结构&#xff0c;它相比与普通的 que…

CP AUTOSAR之SPI Handler/Driver详细说明

本文遵循autosar标准&#xff1a;R22-11 1 简介及功能概述 SPI 提供对通过 SPI 总线连接的设备进行读取和写入的服务。它为多个用户提供对 SPI 通信的访问&#xff08;例如 EEPROM、看门狗、I/O ASIC&#xff09;。它还提供配置片上 SPI 外设所需的机制。   该规范描述了单片…

安装 node 错误的配置环境变量之后使用 npm 报错

安装 node 错误的配置环境变量之后使用 npm 报错 node:internal/modules/cjs/loader:1147 throw err; ^ Error: Cannot find module ‘F:\ACodeTools\Node\node_modules\npm\bin\node_modules\npm\bin\npm-cli.js’ at Module._resolveFilename (node:internal/modules/cjs/loa…

【计算机网络】HTTPS 协议原理

https 一、HTTPS 是什么二、加密1. 加密概念2. 加密的原因3. 常见的加密方式&#xff08;1&#xff09;对称加密&#xff08;2&#xff09;非对称加密 三、数据摘要(数据指纹)四、HTTPS 的工作原理探究1. 只使用对称加密2. 只使用非对称加密3. 双方都使用非对称加密4. 非对称加…

springboot239华府便利店信息管理系统

华府便利店信息管理系统 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本华府便利店信息管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在…

C语言冒泡排序(高级版)

目录: 冒泡排序的原理 主函数 "冒泡排序函数" 比较函数 交换函数 最终输出 完整代码 冒泡排序的原理: 冒泡排序的原理是&#xff1a;从左到右&#xff0c;相邻元素进行比较。每次比较一轮&#xff0c;就会找到序列中最大的一个或最小的一个。这个数就会从序列的最右…

Python实现BIAS工具判断信号:股票技术分析的工具系列(4)

Python实现BIAS工具判断信号&#xff1a;股票技术分析的工具系列&#xff08;4&#xff09; 介绍算法解释 代码rolling函数介绍完整代码data代码BIAS.py 介绍 在股票技术分析中&#xff0c;BIAS&#xff08;乖离率&#xff09;是一种常用的技术指标&#xff0c;用于判断股票价…

unity学习(45)——选择角色菜单——客户端处理服务器的数据

1.已知客户端ReceiveCallBack中已经收到来自服务器返回的数据包。 2.问题是客户端MessageManager中的Update并没有拆解该数据包 &#xff0c;因该是因为脚本没有挂载。 挂在SelectMenu场景中的Camera上即可。 挂载后成功达到目地 其中Update中的List是一个起到全局效果的static…

C# 打包nuget包

类库等项目开发好之后打开csproj&#xff0c;添加如下代码 <PropertyGroup><!--<TargetFramework>netstandard2.0</TargetFramework>--><PackageId>Test01</PackageId><Version>1.0.0</Version><Authors>wjl</Autho…

Redis、Elasticsearch(ES)、RocketMQ和MYSql 持久化对比

在现代大数据和分布式系统中&#xff0c;数据持久化是一个至关重要的话题。本文将针对 Redis、Elasticsearch&#xff08;ES&#xff09;、 RocketMQ和MYSql 这四种常见的数据存储和消息队列系统进行持久化方面的对比分析&#xff0c;帮助读者更好地了解它们各自的特点和适用场…

ABAP - SALV 教程15 用户点击按钮交互功能

SALV增加了按钮&#xff0c;那么该怎么实现点击了按钮实现交互功能呢&#xff1f;可以通过注册事件并且在对应的method中写入相关逻辑&#xff0c;来实现点击按钮后的逻辑。通过自定义状态栏的方式添加按钮&#xff1a;http://t.csdnimg.cn/lMF16通过使用派生类的方式添加按钮&…

lv20 QT主窗口4

熟悉创建主窗口项目 1 QAction 2 主窗口 菜单栏&#xff1a;fileMenu menuBar()->addMenu(tr("&File")); 工具栏&#xff1a;fileToolBar addToolBar(tr("File")); 浮动窗&#xff1a;QDockWidget *dockWidget new QDockWidget(tr("Dock W…

SVN教程-SVN的基本使用

SVN&#xff08;Apache Subversion&#xff09;是一款强大的集中式版本控制系统&#xff0c;它在软件开发项目中扮演着至关重要的角色&#xff0c;用于有效地跟踪、记录和管理代码的演变过程。与分布式系统相比&#xff0c;SVN 的集中式架构使得团队能够更加协同地进行开发&…

在ubuntu上安装hadoop完分布式

准备工作 Xshell安装包 Xftp7安装包 虚拟机安装包 Ubuntu镜像源文件 Hadoop包 Java包 一、安装虚拟机 创建ubuntu系统 完成之后会弹出一个新的窗口 跑完之后会重启一下 按住首先用ctrlaltf3进入命令界面&#xff0c;输入root&#xff0c;密码登录管理员账号 按Esc 然后输入 …

详解算法的时间复杂度和空间复杂度!

目录 ​编辑 1. 算法效率 2. 时间复杂度 2.1 时间复杂度的概念 2.2 大O的表示渐进法 2.3 一个栗子 3. 空间复杂度 4. 常见复杂度对比 5. 完结散花 ​​​​​​​ 悟已往之不谏&#xff0c;知来者犹可追 创作不易&#xff0c;宝子们&#xff01;如果这篇文章对你们有…