css+div实现昼夜切换的水波纹动画效果代码-html代码-BFW代码库

css+div实现昼夜切换的水波纹动画效果代码

代码语言：html

所属分类：动画

代码描述：css+div实现昼夜切换的水波纹动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@layer reset,
theme,
layout,
components;

@layer reset {
	*,
	*::after,
	*::before {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	body,
	html {
		block-size: 100%;
		color-scheme: light dark;
	}
}

@layer theme {
	:root {
		--sky-color-1: hsl(15 100% 50%);
		--sky-color-2: hsl(39 100% 70%);
		--sky-color-3: hsl(200 70% 60%);
		--sky-color-4: hsl(39 100% 50%);
		--sky-color-5: hsl(15 100% 40%);
		--sky-color-6: hsl(220 50% 10%);
		--wave-color-1: hsl(15 80% 30%);
		--wave-color-2: hsl(39 80% 55%);
		--wave-color-3: hsl(200 50% 45%);
		--wave-color-4: hsl(39 80% 35%);
		--wave-color-5: hsl(15 80% 30%);
		--wave-color-6: hsl(220 40% 40%);
		--footer-bg: color-mix(in srgb, var(--sky-color-6), transparent 20%);
		--footer-text: hsl(39 100% 85%);
		--footer-text-hover: hsl(39 100% 95%);
	}
}

@layer layout {
	body {
		align-items: center;
		animation: skyCycle 24s ease-in-out infinite;
		background-color: var(--sky-color-1);
		background-image: radial-gradient(
			ellipse at 50% 0%,
			rgba(255, 255, 255, 0.06) 0%,
			transparent 60%
		);
		display: flex;
		height: 100svh;
		justify-content: center;
		margin: 0;
		overflow: hidden;
		font-family: system-ui, -apple-system, sans-serif;
	}

	.container {
		width: 100%;
		height: 100%;
		pointer-events: none;
		overflow: hidden;
	}

	.sun {
		position: absolute;
		width: 8rem;
		height: 8rem;
		border-radius: 50%;
		background: radial-gradient(
			circle,
			rgba(255, 255, 200, 0.4) 0%,
			rgba(255, 255, 200, 0.2) .........完整代码请登录后点击上方下载按钮下载查看