div+css实现可昼夜切换的灯塔动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：div+css实现可昼夜切换的灯塔动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
:root {
        --red: #972627;
        --red-2: #c17d7d;
        --white: #e2b59a;
        --sm: #fcedbb90;
        --sm-2: #c57356;
        --sky-1: var(--red);
        --sky-2: var(--white);
        --sea-1: #645355;
        --sea-2: #9c766780;
        --sea-3: #0e3641;
        --base-1: #335e53;
        --base-2: #142c2c;
        --shine: #fff6;
        --windows: #5f3300;
        --reflex: #fff2;
}

body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
}

body * {
        transform-style: preserve-3d;
}

.sky {
        position: absolute;
        width: 100%;
        height: 50%;
        background: linear-gradient(180deg, var(--sky-1), var(--sky-2));
        top: 0;
        z-index: -1;
        display: flex;
        align-items: flex-end;
        justify-content: center;
}

.sea {
        position: absolute;
        width: 100%;
        height: 50%;
        background: linear-gradient(180deg, var(--sea-1), #fff0), radial-gradient(circle at 50% 0%, var(--sea-2) 30%, var(--sea-3) 50%, #fff0 100%), var(--sea-3);
        top: 50%;
        z-index: -1;
}

.content {
        width: 60vmin;
        height: 100vmin;
        background-size: contain;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
}

.sky:before,
.content:after {
        content: "";
        position: absolute;
        width: 19vmin;
        height: 19vmin;
        background: radial-gradient(circle at 50% 60%, var(--sm-2), var(--sm) 100%);
        border-radius: 100%;
        margin-top: -7.75vmin;
        box-shadow: 0 0.5vmin 0.5vmin 0 var(--sm) inset;
        clip-path: polygon(0 0, 100% 0, 100% 71%, 0 71%);
}

.content:after {
        transform: rotateX(180deg);
        transform-origin: 50% 71%;
        opacity: 0.25;
        background: linear-gradient(180deg, #fff0, var(--sm)), radial-gradient(circle at 50% 50%, #fff0, #fff0 5vmin 8.75vmin, #fff0 calc(9.25vmin + 5px) 100%);
        box-shadow: 0 -1vmin 1vmin 0 var(--sm) inset;
}

.sky:before {
        bottom: -6vmin;
}

.content * {
        position: absolute;
}

.lighthouse {
        background: #0ff0;
        width: 11vmin;
        height: 30vmin;
        margin-top: -30vmin;
        perspective: 80vmin;
}

.base {
        --rock-1: var(--base-1) 1.1vmin, #fff0 calc(1.1vmin + 3px) 100%;
        --rock-2: var(--base-1) 1vmin, #fff0 calc(1vmin + 1px) 100%;
        background:         
                radial-gradient(ellipse at 14% 37%, var(--rock-2)),
                radial-gradient(ellipse at 86% 37%, var(--rock-2)),
                radial-gradient(ellipse at 19% 6%, var(--rock-1)),
                radial-gradient(ellipse at 81% 6%, var(--rock-1)),
                radial-gradient(ellipse at 63% 32%, var(--rock-1)),
                radial-gradient(ellipse at 37% 32%, var(--rock-1)),
                radial-gradient(ellipse at 76% 60%, var(--rock-1)),
                radial-gradient(ellipse at 24% 60%, var(--rock-1)),
                radial-gradient(ellipse at 98% 84%, var(--rock-1)),
                radial-gradient(ellipse at 73% 96%, var(--rock-1)),
                radial-gradient(ellipse at 50% 72%, var(--rock-1)),
                radial-gradient(ellipse at 27% 96%, var(--rock-1)),
                radial-gradient(ellipse at 2% 84%, var(--rock-1)),
                linear-gradient(180deg, var(--base-1) 0 0.25vmin, #fff0 0 100%), 
                linear-gradient(90deg, #fff0 1vmin, var(--base-2) 0 calc(100% - 1vmin), #fff0 0 100%),
                linear-gradient(-119deg, #fff0 0 1.25vmin, var(--base-2) calc(0.9vmin) 70%, #fff0 0 100%), 
                linear-gradient(119deg, #fff0 0 1.25vmin, var(--base-2) calc(0.9vmin + 1px) 70%, #fff0 0 100%),
                linear-gradient(90deg, #fff0 0 0.75vmin, var(--base-1) 0 calc(100% - 0.75vmin), #fff0 0 100%),
                linear-gradient(-119deg, #fff0 0 0.9vmin, var(--base-1) calc(0.9vmin + 1px) 70%, #fff0 0 100%),
                linear-gradient(119deg, #fff0 0 0.9vmin, var(--base-1) calc(0.9vmin + 1px) 70%, #fff0 0 100%);
        width: 11vmin;
        height: 3vmin;
        bottom: 0;
        border-radius: 1.55vmin 1.55vmin 0 0;
}

.base:before {
        content: "";
        background: 
                linear-gradient(-95deg, #fff0 0 0.25vmin, var(--red-2) calc(0.25vmin + 1px) 0.65vmin, var(--red) calc(0.65vmin + 1px) 6vmin, #fff0 0 100%), 
                linear-gradient(95deg, #fff0 0 0.25vmin, var(--red-2) calc(0.25vmin + 1px) 0.65vmin, var(--red) calc(0.65vmin + 1px) 6vmin, #fff0 0 100%);
        width: 7.5vmin;
        height: 2vmin;
        position: absolute;
        top: -2vmin;
        left: 1.75vmin;
}

.base:after {
        content: "";
        background: 
                linear-gradient(-112deg, var(--red) 0 1vmin, var(--white) calc(1vmin + 1px) 1.25vmin, #fff0 calc(1.25vmin + 1px) 100% ), 
                linear-gradient(112deg, var(--red) 0 1vmin, var(--white) calc(1vmin + 1px) 1.25vmin, #fff0 calc(1.25vmin + 1px) 100%), 
                repeating-linear-gradient(0deg, var(--base-2) 0 0.3vmin, var(--base-1) 0 0.5vmin);
        width: 4.1vmin;
        height: 2vmin;
        position: absolute;
        top: -2vmin;
        left: 3.5vmin;
        background-repeat: no-repeat;
        background-position: 0 0, 0 0, 5% 0;
        background-size: 100% 100%, 100% 100%, 90% 100%;
}

.tower {
        background: 
                radial-gradient(circle at 50% 100%, var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%), 
                radial-gradient(circle at 50% calc(100% - 0.25vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%), 
                radial-gradient(circle at 50% calc(100% - 0.5vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%), 
                radial-gradient(circle at 50% calc(100% - 0.75vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%), 
                radial-gradient(circle at 50% calc(100% - 1vmin), var(--windows) 0.4vmin, #fff0 calc(0.4vmin + 1px) 100%),
                linear-gradient(-94.5deg, var(--shine) 0 1.85vmin, #fff0 calc(1.85vmin + 1px) 100%), 
                linear-gradient(94.5deg, var(--shine) 0 1.85vmin, #fff0 calc(1.85vmin + 1px) 100%), 
                radial-gradient(circle at 50% 125%, var(--white) 0 9vmin, var(--red) calc(9vmin + 1px) 13vmin, var(--white) calc(13vmin + 1px) 17vmin, var(--red) calc(17vmin + 1px) 21vmin, var(--white) calc(21vmin + 1px) 23vmin);
        width: 6vmin;
        height: 19vmin;
        left: 2.5vmin;
        top: 6vmin;
        clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%);
}

.top {
        background: 
                linear-gradient(90deg, var(--shine) 0 0.75vmin, #fff0 0 100%),
                linear-gradient(90deg, var(--shine) 0 0.75vmin, #fff0 0 100%), 
                linear-gradient(90deg, var(--shine) 0 0.7vmin, #fff0 0 100%), 
                linear-gradient(90deg, var(--shine) 0 0.7vmin, #fff0 0 100%), 
                conic-gradient(from -1deg at 8% 89%, #fff0 0 35%, var(--shine) 36% 100%), 
                conic-gradient(from 0deg at 92% 89%, var(--shine) 0 64%, #fff0 65% 100%),
                radial-gradient(circle at 50% 1.55vmin, #fff, #fc0 0.25vmin, var(--red-2) calc(0.25vmin + 1px) 0.35vmin, #fff0 calc(0.35vmin + 1px) 100%), 
                radial-gradient(circle at 50% 187%, var(--white) 0 7vmin, #fff0 calc(7vmin + 1px) 7.5vmin, var(--white) calc(7.5vmin + 1px) 8.35vmin, #fff0 .........完整代码请登录后点击上方下载按钮下载查看