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) 40%,
			transparent 70%
		);
		pointer-events: none;
		animation: sunPath 24s linear infinite;
		z-index: -1;
	}

	.stars {
		position: absolute;
		width: 100%;
		height: 100%;
		pointer-events: none;
		background-image: radial-gradient(
				circle at 15% 20%,
				rgba(255, 255, 255, 0.6) 0%,
				transparent 0.1%
			),
			radial-gradient(
				circle at 25% 15%,
				rgba(255, 255, 255, 0.4) 0%,
				transparent 0.08%
			),
			radial-gradient(
				circle at 35% 25%,
				rgba(255, 255, 255, 0.5) 0%,
				transparent 0.09%
			),
			radial-gradient(
				circle at 45% 18%,
				rgba(255, 255, 255, 0.7) 0%,
				transparent 0.12%
			),
			radial-gradient(
				circle at 55% 22%,
				rgba(255, 255, 255, 0.4) 0%,
				transparent 0.08%
			),
			radial-gradient(
				circle at 65% 16%,
				rgba(255, 255, 255, 0.5) 0%,
				transparent 0.1%
			),
			radial-gradient(
				circle at 75% 20%,
				rgba(255, 255, 255, 0.6) 0%,
				transparent 0.11%
			),
			radial-gradient(
				circle at 85% 24%,
				rgba(255, 255, 255, 0.4) 0%,
				transparent 0.08%
			),
			radial-gradient(
				circle at 20% 35%,.........完整代码请登录后点击上方下载按钮下载查看