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

代码语言：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%;
        }
        
        .moon:after {
        	content: "";
        	background: radial-gradient(
        		circle at 0% 40%,
        		#efefef 0% 60%,
        		#ededed 75% 100%
        	);
        	width: 4.5vmin;
        	height: 4.5vmin;
        	position: absolute;
        	top: 20%;
        	left: 20%;
        	border-radius: 100%;
        	filter: blur(2px);
        }
        
        .light {
        	mix-blend-mode: soft-light;
        	/* background: #fff4d2;*/
        	width: 22vmin;
        	height: 22vmin;
        	border-radius: 100%;
        	position: absolute;
        	top: 14vmin;
        	left: 19vmin;
        	transform: rotate(-45deg);
        	opacity: 0;
        	animation: start 5s ease 0s 1, blink-off 0.2s ease 0s 2;
        }
        
        .light:before {
        	content: "";
        	position: absolute;
        	border: 8vmin solid transparent;
        	border-top: 150vmin solid #fff4d2;
        	top: 14vmin;
        	left: 0.5vmin;
        	border-radius: 0.5vmin;
        	opacity: 0.65;
        	filter: blur(3px);
        	width: 5vmin;
        }
        
        .light:after {
        	content: "";
        	mix-blend-mode: soft-light;
        	background: #fff4d2;
        	width: 22vmin;
        	height: 22vmin;
        	border-radius: 100%;
        	position: absolute;
        	top: 0;
        	left: 0;
        	transform: rotate(-45deg);
        	filter: blur(2px);
        }
        
        body:hover .light {
        	animation-iteration-count: 0;
        }
        
        body:active .light {
        	opacity: 1;
        	animation: start 1s ease 0s 1, blink-on 0.15s ease 0s 2;
        	cursor: none;
        }
        
        @keyframes blink-off {
        	40% {
        		opacity: 1;
        	}
        	50% {
        		opacity: 0;
        	}
        	60% {
        		opacity: 1;
        	}
        }
        @keyframes blink-on {
        	40% {
        		opacity: 1;
        	}
        	50% {
        		opacity: 0;
        	}
        	60% {
        		opacity: 1;
        	}
        }
        
        @keyframes start {
        	20%,
        	80% {
        		opacity: 1;
        	}
        }
        
        /*** 
        	Batman logo by Stephen Greig:
        	http://tangledindesign.com/famous-logos-in-css3-the-dark-knight/
        ***/
        #batman-logo {
        	filter: contrast(1.5) blur(0.5px);
        	height: 4.35vmin;
        	overflow: hidden;
        	position: absolute;
        	width: 16vmin;
        	background: #000;
        	left: 1.85vmin;
        	top: 9.75vmin;
        	background-image: -webkit-gradient(
        		linear,
        		left bottom,
        		right top,
        		color-stop(0, rgb(72, 84, 92)),
        		color-stop(0.63, rgb(25, 26, 26)),
        		color-stop(0.86, rgb(26, 26, 26))
        	);
        	background-image: -moz-linear-gradient(
        		/* Remember Browser specific prefixes! */ left bottom,
        		/* Gradient start point (the angle) */ rgb(72, 84, 92) 0%,
        		/* First colour and start point */ rgb(25, 26, 26) 63%,
        		/* Second colour and start point */ rgb(26, 26, 26) 86%
        	);
        	background-image: -o-linear-gradient(
        		left bottom,
        		rgb(72, 84, 92) 0%,
        		rgb(25, 26, 26) 63%,
        		rgb(26, 26, 26) 86%
        	);
        	transform: rotateZ(48deg) rotateY(15deg) rotateX(0deg) scaleY(1.75)
        		scaleX(1.25);
        	box-shadow: 0 0 10vmin 2vmin #fff;
        	border-radius: 5% 5% 100% 100%;
        }
        
        #batman-logo div {
        	position: absolute;
        }
        
        #left-white {
        	background: var(--bg);
        	border-radius: 3.2vmin 5.12vmin 0.96vmin 1.16vmin / 2.56vmin 3.2vmin 1.16vmin
        		1.16vmin;
        	width: 7.36vmin;
        	height: 2.56vmin;
        	top: -0.032vmin;
        	left: -5.056vmin;
        }
        
        #left-white:after {
        	content: "";
        	position: absolute;
        	background: var(--bg);
        	width: 10.656vmin;
        	height: 7.04vmin;
        	border-radius: 0 12.8vmin 12.8vmin 12.8vmin / 0 9.6vmin 9.6vmin 9.6vmin;
        	top: 2.336vmin;
        	left: 2.816vmin;
        }
        
        #right-white {
        	background: var(--bg);
        	border-radius: 5.12vmin 3.2vmin 1.16vmin 0.96vmin / 3.2vmin 2.56vmin 1.16vmin
        		1.16vmin;
        	width: 7.36vmin;
        	height: 2.56vmin;
        	top: -0.032vmin;
        	right: -5.056vmin;
        }
        
        #right-white:after {
        	content: "";
        	position: absolute;
        	background: var(--bg);
        	width: 12.256vmin;
        	height: 7.04vmin;
        	border-radius: 12.8vmin 0 12.8vmin 12.8vmin / 9.6vmin 0 9.6vmin 9.6vmin;
        	top: 2.336vmin;
        	right: 1.216vmin;
        }
        
        #top-white {
        	width: 0.384vmin;
        	top: 0;
        	left: 7.664vmin;
        	border-left: 0.384vmin solid #fff0;
        	border-right: 0.384vmin solid #fff0;
        	border-top: 0.64vmin solid #fff;
        }
        
        #top-white:before {
        	content: "";
        	position: absolute;
        	width: 2.08vmin;
        	height: 2.464vmin;
        	background: var(--bg);
        	border-radius: 0.96vmin 0.32vmin 0.32vmin 0.96vmin / 2.56vmin 1.16vmin 1.16vmin
        		1.16vmin;
        	top: -2.08vmin;
        	right: 0.576vmin;
        	-moz-transform: rotate(5deg);
        	-webkit-transform: rotate(5deg);
        	-o-transform: rotate(5deg);
        }
        
        #top-white:after {
        	content: "";
        	position: absolute;
        	width: 2.08vmin;
        	height: 2.464vmin;
        	background: var(--bg);
        	border-radius: 0.32vmin 0.96vmin 0.96vmin 0.32vmin / 1.16vmin 2.56vmin 1.16vmin
        		1.16vmin;
        	top: -2.08vmin;
        	left: 0.576vmin;
        	-moz-transform: rotate(-5deg);
        	-webkit-transform: rotate(-5deg);
        	-o-transform: rotate(-5deg);
        }
        
        #lighting {
        	width: 3.2vmin;
        	height: 3.2vmin;
        	background: var(--bg);
        	border-radius: 2.4vmin;
        	left: 3.2vmin;
        	top: -0.32vmin;
        	opacity: 0.02;
        	box-shadow: #fff 0 0 2.24vmin;
        	-webkit-box-shadow: #fff 0 0 2.24vmin;
        	-moz-box-shadow: #fff 0 0 2.24vmin;
        }
        /*** END Batman logo by Stephen Greig ***/
        
        .skyline {
        	height: 65vh;
        	position: absolute;
        	background: linear-gradient(75deg, #09080c, #0f0323), #0f0323;
        	bottom: 0;
        	width: 100vw;
        
        	background: var(--w5) 0.5% 54%, var(--w6) 2.5% 56.25%, var(--w7) 0.25% 64.85%,
        		var(--w8) 0.75% 84.25%, var(--w6) 19.685% 44.2%, var(--w5) 22.35% 44.25%,
        		var(--w7) 15.75% 55.25%, var(--w6) 16.6% 58.25%, var(--w8) 21.475% 54%,
        		var(--w8) 23.35% 65.5%, var(--w5) 13.85% 62.25%, var(--w6) 19.35% 65.25%,
        		var(--w6) 22.45% 54%, var(--w7) 22.35% 68.15%, var(--w8) 35.35% 55.25%,
        		var(--w8) 34.1% 61.25%, var(--w7) 33.1% 84%, var(--w5) 32.35% 73.25%,
        		var(--w6) 47.35% 71.25%, var(--w5) 51.5% 82.25%, var(--w8) 41.55% 50%,
        		var(--w6) 42.5% 50%, var(--w7) 38.95% 65%, var(--w8) 44.5% 68%,
        		var(--w6) 40.55% 50%, var(--w5) 44.85% 59%, var(--w7) 53.25% 66%,
        		var(--w8) 49.55% 60%, var(--w6) 50.55% 70%, var(--w5) 53.75% 74%,
        		var(--w5) 51.55% 70%, var(--w6) 51.55% 76%, var(--w7) 62.4% 67%,
        		var(--w7) 54.75% 57%, var(--w8) 63% 55.5%, var(--w5) 70.5% 66%,
        		var(--w6) 68.5% 69%, var(--w7) 70% 51%, var(--w8) 71% 51%, var(--w7) 68.5% 54%,
        		var(--w6) 77% 74%, var(--w7) 72% 61%, var(--w5) 78% 55%, var(--w6) 78% 57%,
        		var(--w6) 88% 66%, var(--w5) 93.35% 27.5%, var(--w5) 91% 32%,
        		var(--w8) 89% 66%, var(--w8) 91% 34.5%, var(--w7) 91% 37%, var(--w7) 91% 41%,
        		var(--w6) 99% 86%, var(--w6) 92% 39%, var(--w5) 92% 43%, var(--w7) 93.5% 55%,
        		var(--w5) 93% 46%, linear-gradient(75deg, #150e21, .........完整代码请登录后点击上方下载按钮下载查看