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