css布局实现冬天窗外的雪景效果代码-html代码-BFW代码库

css布局实现冬天窗外的雪景效果代码

代码语言：html

代码描述：css布局实现冬天窗外的雪景效果代码

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

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

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

  
<style>
@import url("https://fonts.googleapis.com/css2?family=Rubik+Doodle+Shadow&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");

main {
	display: grid;
	place-items: center;
	gap: 3vmin;
}
.winter {
	position: relative;
	width: 35vw;
	height: 35vw;
	background: 
		/* TREE */ /* FORE */ conic-gradient(
				at 50% 0,
				#0000 165deg,
				#228b22 165deg 195deg,
				#0000 195deg
			)
			top 82% left 17% / 27% 50%,
		linear-gradient(to right, #374231 0 100%, #0000 0 100%) top 95% left 25% / 2%
			8%,
		/* TREE  MIDDLE DISTANCE */
			conic-gradient(at 50% 0, #0000 165deg, #1c721c 165deg 195deg, #0000 195deg)
			top 80% left 37% / 13% 22%,
		linear-gradient(to right, #374231 0 100%, #0000 0 100%) top 86.5% left 39% /
			1.5% 6%,
		/* TREE DISTANCE */
			conic-gradient(at 50% 0, #0000 165deg, #186218 165deg 195deg, #0000 195deg)
			top 77% left 5% / 8% 15%,
		linear-gradient(to right, #374231 0 100%, #0000 0 100%) top 82% left 8% /
			1.25% 3%,
		/* TREE FAR DISTANCE */
			conic-gradient(at 50% 0, #0000 165deg, #145214 165deg 195deg, #0000 195deg)
			top 76.5% left 13% / 5% 10%,
		linear-gradient(to right, #374231 0 100%, #0000 0 100%) top 80% left 14.5% /
			1% 2%,
		/* RIGHT SNOW SLOPE */ linear-gradient(-5deg, #fffafa 0 20%, #0000 22% 100%),
		/* GLOW */ radial-gradient(ellipse at 50% 120%, yellow 0 15%, #0000 70% 100%)
			top 87% left 130% / 70% 20%,
		/* LEFT SNOW SLOPE & SKY */
			linear-gradient(7deg, #f1f0fb 0 20%, #1a1a79 22%, #000 100%);
	background-repeat: no-repeat;
	outline: 8px solid #efdecd;
	box-shadow: 5px 5px 25px -5px #4242d6;
}
.winter::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	outline: 2px solid rgba(0 0 0 / 0.3);
	outline-offset: 8px;
	background: 
		/* WINDOW FRAMES */ linear-gradient(
				to right,
				#efdecd 0 100%,
				#0000 1.........完整代码请登录后点击上方下载按钮下载查看