div+css实现城市夜晚月亮天空投射蝙蝠侠标识效果代码-html代码-BFW代码库

div+css实现城市夜晚月亮天空投射蝙蝠侠标识效果代码

代码语言：html

代码描述：div+css实现城市夜晚月亮天空投射蝙蝠侠标识效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
        	--bg: #fff4d1;
        	--w1: conic-gradient(from 90deg at 50% 50%, #fff491 0% 25%, #fff0 0% 100%)
        		no-repeat;
        	--w2: conic-gradient(from 90deg at 50% 50%, #ffdf81 0% 25%, #fff0 0% 100%)
        		no-repeat;
        	--w3: conic-gradient(from 90deg at 50% 50%, #ffb84f 0% 25%, #fff0 0% 100%)
        		no-repeat;
        	--w4: conic-gradient(from 90deg at 50% 50%, #ff926f 0% 25%, #fff0 0% 100%)
        		no-repeat;
        	--w5: conic-gradient(from 90deg at 50% 50%, #acb0b1 0% 25%, #fff0 0% 100%)
        		no-repeat;
        	--w6: conic-gradient(from 90deg at 50% 50%, #9dc8dc 0% 25%, #fff0 0% 100%)
        		no-repeat;
        	--w7: conic-gradient(from 90deg at 50% 50%, #577c9a 0% 25%, #fff0 0% 100%)
        		no-repeat;
        	--w8: conic-gradient(from 90deg at 50% 50%, #2b4e5f 0% 25%, #fff0 0% 100%)
        		no-repeat;
        }
        
        * {
        	transform-style: preserve-3d;
        }
        
        body {
        	margin: 0;
        	width: 100vw;
        	height: 100vh;
        	overflow: hidden;
        	background-color: #1f1f1f;
        	background-image: linear-gradient(315deg, #0cbaba 0%, #380036 74%);
        	cursor: pointer;
        }
        
        .sky {
        	background: linear-gradient(0deg, #673ab78a, #3c3c3c94);
        	height: 100vh;
        }
        
        .sky:after {
        	content: "";
        	position: absolute;
        	width: 100vw;
        	height: 100vh;
        	top: 0vh;
        	background-image: radial-gradient(2px 2px at 20px 30px, #484341, transparent),
        		radial-gradient(2px 2px at 43px 75px, #735454, transparent),
        		radial-gradient(2px 1px at 54px 184px, #828282, transparent),
        		radial-gradient(2px 2px at 93px 47px, #654b49, transparent),
        		radial-gradient(1px 1px at 148px 87px, #3a1919, transparent),
        		radial-gradient(2px 2px at 193px 137px, #a26662, transparent),
        		radial-gradient(1px 2px at 210px 154px, #805241, transparent),
        		radial-gradient(2px 2px at 243px 102px, #866356, transparent),
        		radial-gradient(2px 1px at 264px 184px, #794937, transparent),
        		radial-gradient(2px 2px at 293px 44px, #735454, transparent),
        		radial-gradient(1px 1px at 223px 62px, #ad968e, transparent),
        		radial-gradient(2px 2px at 249px 162px, #884228, transparent),
        		radial-gradient(2px 2px at 73px 99px, #442e26, transparent),
        		radial-gradient(1px 1px at 163px 42px, #403433, transparent),
        		linear-gradient(180deg, #fff0 10%, #000 25%, #111 50%, #222 75%, #111 100%);
        	background-repeat: no-repeat, repeat;
        	background-size: 333px 263px, 333px 163px, 333px 163px, 333px 163px,
        		333px 163px, 333px 163px, 333px 163px, 333px 163px, 333px 163px, 333px 163px,
        		333px 163px, 333px 163px, 333px 163px, 333px 163px, 100% 100%;
        	opacity: 0.5;
        	mix-blend-mode: color-burn;
        }
        
        .moon {
        	position: absolute;
        	z-index: 2;
        	width: 20vmin;
        	height: 20vmin;
        	left: 20vmin;
        	top: 15vmin;
        	opacity: 1;
        	border-radius: 100%;
        	animation: start-moon 3s ease 0s 1;
        	background: radial-gradient(
        			circle at 50% 50%,
        			#fdfdfd 0% 7vmin,
        			#ffffff00 7.25vmin 100%
        		),
        		#fff;
        	box-shadow: 0 0 8em 4em #6493a9, 0 0 8em -16em #ff660000 inset,
        		0 0 20px 5px #fdfdfd;
        	mix-blend-mode: exclusion;
        }
        
        .moon:before {
        	content: "";
        	background: radial-gradient(
        		circle at 100% 60%,
        		#ffffff00 0% 60%,
        		#dddddd 75% 100%
        	);
        	width: 100%;
        	height: 100%;
        	position: absolute;
        	top: 0%;
        	left: 0%;
        	border-radius: 100%;
        }
        
  .........完整代码请登录后点击上方下载按钮下载查看