纯css布局模拟阳台太阳光照射效果代码-html代码-BFW代码库

纯css布局模拟阳台太阳光照射效果代码

代码语言：html

代码描述：纯css布局模拟阳台太阳光照射效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body {
	--sun: #f4dbb3;
	--sea: #4c80d5;
	--sky-1: #b0ddf4;
	--sky-2: #87b1dd;
	--floor-1: #e67563;
	--floor-2: #7e293c;
	--shadow-1: #a19aa8;
	--shadow-2: #a099a7;
	--shadow-3: #797c93;
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	background: 
		linear-gradient(64deg, #fff0 50%, #0004),
		linear-gradient(0deg, var(--sky-1), var(--sky-2)),
		conic-gradient(from -25deg at calc(50% + 272px) calc(50% + 218px), var(--shadow-2) 0 124deg, var(--floor-2) 0 240deg, #fff0 0 100%),
		conic-gradient(from 99deg at calc(50% + 125px) calc(50% + 195px), var(--floor-1) 0 126deg, #fff0 0 100%),
		conic-gradient(from 99deg at calc(50% + 25px) calc(.........完整代码请登录后点击上方下载按钮下载查看