svg+css实现白天黑夜切换radio按钮点击背景切换代码-html代码-BFW代码库

svg+css实现白天黑夜切换radio按钮点击背景切换代码

代码语言：html

所属分类：其他

代码描述：svg+css实现白天黑夜切换radio按钮点击背景切换代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
<style>
:root {
	--morning-color: #60a5fa;
	--night-color: #7c3aed;
	--morning-bg: #87ceeb;
	--night-bg: #1a237e;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: system-ui, sans-serif;
	background-color: var(--morning-bg);
	transition: background-color 0.5s ease;
	position: relative;
	overflow: hidden;
}

.background-elements {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.clouds {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 1;
	transition: opacity 0.5s ease;
}

.cloud {
	position: absolute;
	width: 180px;
	height: 60px;
	opacity: 0.9;
}

.cloud:nth-child(1) {
	top: 12%;
	animation: float 25s linear infinite;
	animation-delay: -18s;
	transform: scale(0.9);
}
.cloud:nth-child(2) {
	top: 28%;
	animation: float 22s linear infinite;
	animation-delay: -3s;
	transform: scale(1.1);
}
.cloud:nth-child(3) {
	top: 45%;
	animation: float 28s linear infinite;
	animation-delay: -12s;
	transform: scale(0.85);
}
.cloud:nth-child(4) {
	top: 33%;
	animation: float 20s linear infinite;
	animation-delay: -7s;
	transform: scale(1.2);
}
.cloud:nth-child(5) {
	top: 67%;
	animation: float 24s linear infinite;
	animation-delay: -15s;
	transform: scale(0.95);
}
.cloud:nth-child(6) {
	top: 52%;
	animation: float 26s linear infinite;
	animation-delay: -4s;
	transform: scale(1.15);
}
.cloud:nth-child(7) {
	top: 82%;
	animation: float 23s linear infinite;
	animation-delay: -9s;
	transform: scale(0.8);
}
.cloud:nth-child(8) {
	top: 73%;
	animation: float 27s linear infinite;
	animation-delay: -21s;
	transform: scale(1.05);
}

.cloud-part {
	position: absolute;
	background: white;
	border-radius: 50%;
	filter: blur(5px);
}

.cloud-part:nth-child(1) {
	width: 60px;
	height: 60px;
	top: -25px;
	left: 20px;
}
.cloud-part:nth-child(2) {
	width: 70px;
	height: 70px;
	top: -30px;
	left: 60px;
}
.cloud-part:nth-child(3) {
	width: 55px;
	height: 55px;
	top: -20px;
	left: 100px;
}

.cloud-base {
	position: absolute;
	width: 100%;
	height: 40px;
	background: white;
	border-radius: 20px;
	filter: blur(5px);
	bottom: 0;
}

.stars {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.stars::before,
.stars::after {
	content: "";
	position: absolute;
	width: 4px;
	height: 4px;
	background: white;
	border-radius: 50%;
	filter: blur(1px);
	box-shadow: 15vw 10vh 3px white, 35vw 15vh 2px white, 25vw 25vh 4px white,
		85vw 35vh 3px white, 45vw 45vh 2px white, 65vw 55vh 4px white,
		75vw 65vh 3px white, 10vw 75vh 4px white, 90vw 85vh 3px white,
		50vw 90vh 2px white, 5vw 15vh 3px white, 95vw 25vh 4px white,
		30vw 40vh 3px white, 70vw 50vh 4px white, 20vw 60vh 3px white,
		80vw 70vh 2px white, 40vw 80vh 4px white, 60vw 95vh 3px white;
	animation: twinkle 2s ease-in-out infinite alternate;
}

.stars::after {
	animation-delay: 1s;
}

.........完整代码请登录后点击上方下载按钮下载查看