单个div+css实现月光下的灯塔效果代码-html代码-BFW代码库

代码语言：html
代码描述：单个div+css实现月光下的灯塔效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        /* font */
        /* colors */
        /*dimensions */
        /* Presets */
        *, *:before, *:after {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
        }
        
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          background: linear-gradient(180deg, #735C46 19.59%, #88827D 100%) 0% 90vh/100vw 4vh no-repeat, linear-gradient(#1C5BBA 0%, #0C2954 100%) 0% 94vh/100vw 6vh no-repeat, radial-gradient(ellipse, #735C46 40vh, transparent 40vh) -50vw 50vh/280vw 80vh no-repeat, radial-gradient(ellipse, #735C46 40vh, transparent 40vh) -75vw 50vh/280vw 80vh no-repeat, radial-gradient(ellipse, #735C46 40vh, transparent 40vh) -100vw 50vh/280vw 80vh no-repeat, radial-gradient(ellipse, #735C46 40vh, transparent 40vh) -125vw 50vh/280vw 80vh no-repeat, conic-gradient(from 167.72deg at 50.06% 45.46%, #133955 -54.38deg, #344275 7.33deg, #6F357D 84.38deg, #30297D 138.99deg, #213A57 168.75deg, #290755 205.87deg, #0C4A47 264.38deg, #133955 305.62deg, #344275 367.33deg);
        }
        
        div:before, div:after {
          display: block;
          content: "";
          position: absolute;
        }
        
        div.wonder {
          width: 100vw;
          height: 90vh;
          position: relative;
          background: radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 19vw 21vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 18vw 22vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 61vw 59vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 26vw 69vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 3vw 32vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 2vw 55vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 2vw 82vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 78vw 48vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 77vw 80vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 93vw 45vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 90vw 53vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 35vw 45vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 67vw 37vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 87vw 44vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 93vw 27vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 88vw 24vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 46vw 76vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 64vw 73vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 39vw 14vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 85vw 67vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 80vw 38vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 13vw 6vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 28vw 26vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 13vw 15vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 34vw 7vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 98vw 71vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 35vw 35vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 79vw 84vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 31vw 75vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 40vw 59vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 53vw 8vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 35vw 34vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 15vw 62vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 6vw 78vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 56vw 55vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 77vw 81vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 56vw 22vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 60vw 15vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 5vw 14vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 95vw 71vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 21vw 40vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 34vw 15vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 62vw 5vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 2vw 75vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 48vw 68vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 6vw 52vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 59vw 50vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat, radial-gradient(circle, #D9D6C5 0.25vh, transparent 0.25vh) 59vw 41vh/calc( 0.25vh * 2) calc( 0.25vh * 2) no-repeat;
        }
        
        div.wonder:before {
          width: 110vh;
          height: 95vh;
          position: relative;
          display: flex;
          margin: 0 auto;
          justify-content: center;
          align-items: center;
          background: linear-gradient(#26211B 6vh, transparent 6vh) 49.75vh 38.5vh/1.5vh 2.5vh no-repeat, linear-gradient(#26211B 6vh, transparent 6vh) 52.25vh 38.5vh/1.5vh 2.5vh no-repeat, linear-gradient(#26211B 6vh, transparent 6vh) 54.75vh 38.5vh/1.5vh 2.5vh no-repeat, linear-gradient(#26211B 6vh, transparent 6vh) 57.25vh 38.5vh/1.5vh 2.5vh no-repeat, linear-gradient(#26211B 6vh, transparent 6vh) 49.75vh 42vh/1.5vh 2.5vh no-repeat, linear-gradient(#26211B 6vh, transparent 6vh) 52.25vh 42vh/1.5vh 2.5vh no-repeat, linear-gradient(#26211B 6vh, transparent 6vh) 54.75vh 42vh/1.5vh 2.5vh no-repeat, linear-gradient(#26211B 6vh, transparent 6vh) 57.25vh 42vh/1.5vh 2.5vh no-repeat, linear-gradient(#26211B 6vh, transparent 6vh) 49.75vh 45.5vh/1.5vh 2.5vh no-repeat, linear-gradient(#26211B 6vh, transparent 6vh) 52.25vh 45.5vh/1.5vh 2.5vh no-repeat, linear-gradient(#26211B 6vh, transparent 6vh) 54.75vh 45.5vh/1.5vh 2.5vh no-repeat, linear-gradient(#26211B 6vh, transparent 6vh) 57.25vh 45.5vh/1.5vh 2.5vh no-repeat, linear.........完整代码请登录后点击上方下载按钮下载查看