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, #a.........完整代码请登录后点击上方下载按钮下载查看