css实现灯塔效果-html代码-BFW代码库

代码语言：html
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> CSS Lighthouse Scene</title>
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        html {
            box-sizing: border-box;
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        * {
            position: absolute;
        }

        *:before,
        *:after {
            content: "";
            position: absolute;
        }

        .scene {
            width: 100vw;
            height: 100vh;
        }

        .background {
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
            background-color: #29284c;
            background-image: linear-gradient(#29284c 0%, #4c4b82 10%, #717ae1 60%, #75e2fa 90%);
        }

        .mountains {
            width: 100%;
            height: 250px;
            bottom: 65px;
            z-index: 3;
        }
        .mountains .mountain {
            width: 250px;
            height: 250px;
            right: 50px;
            bottom: -40px;
            background-color: #717ae1;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            border-radius: 3px;
        }
        .mountains .mountain:after {
            width: 100%;
            height: 100%;
            opacity: 0.7;
            background-image: linear-gradient(135deg, #4c4b82 0%, #717ae1 20%, #75e2fa 40%);
        }
        .mountains .mountain:nth-child(2) {
            width: 240px;
            height: 240px;
            right: 220px;
            z-index: 2;
        }
        .mountains .mountain:nth-child(3) {
            width: 260px;
            height: 260px;
            right: 350px;
        }
        .mountains .mountain:nth-child(4) {
            width: 200px;
            height: 200px;
            right: 130px;
            bottom: -70px;
            z-index: 3;
        }
        .mountains .mountain:nth-child(4):after {
            background-image: linear-gradient(135deg, #4c4b82 0%, #717ae1 6%, #75e2fa 20%);
        }

        .sea {
            width: 100%;
            height: 170px;
            bottom: 0;
            left: 0;
            background: #29284c;
            background-image: linear-gradient(totop, #29284c 0%, #4c4b82 30%, #717ae1 60%, #75e2fa 90%);
            z-index: 4;
        }
        .sea .wave {
            height: 3px;
            background-color: #d6d9f6;
            border-radius: 100%;
            opacity: 0.2;
            -webkit-animation: wave5s linear infinite;
            animation: wave5s linear infinite;
        }
        .sea .wave:nth-of-type(1) {
            width: 82px;
            bottom: 80px;
            left: 8vw;
            opacity: 0.4;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }
        .sea .wave:nth-of-type(2) {
            width: 139px;
            bottom: 98px;
            left: 55vw;
            opacity: 0.1;
            -webkit-animation-delay: 3s;
            animation-delay: 3s;
        }
        .sea .wave:nth-of-type(3) {
            width: 63px;
            bottom: 139px;
            left: 84vw;
            opacity: 0.2;
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
        }
        .sea .wave:nth-of-type(4) {
            width: 82px;
            bottom: 49px;
            left: 86vw;
            opacity: 0.5;
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
        }
        .sea .wave:nth-of-type(5) {
            width: 132px;
            bottom: 1px;
            left: 58vw;
            opacity: 0.2;
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
        }
        .sea .wave:nth-of-type(6) {
            width: 81px;
            bottom: 18px;
            left: 24vw;
            opacity: 0.2;
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
        }
        .sea .wave:nth-of-type(7) {
            width: 113px;
            bottom: 161px;
            left: 41vw;
            opacity: 0.1;
            -webkit-animation-delay: 3s;
            animation-delay: 3s;
        }
        .sea .wave:nth-of-type(8) {
            width: 104px;
            bottom: 93px;
            left: 100vw;
            opacity: 0.1;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }
        .sea .wave:nth-of-type(9) {
            width: 100px;
            bottom: 63px;
            left: 85vw;
            opacity: 0.4;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }
        .sea .wave:nth-of-type(10) {
            width: 98px;
            bottom: 58px;
            left: 99vw;
            opacity: 0.1;
            -webkit-animation-delay: 3s;
            animation-delay: 3s;
        }
        .sea .wave:nth-of-type(11) {
            width: 102px;
            bottom: 17px;
            left: 39vw;
            opacity: 0.3;
            -webkit-animation-delay: 3s;
            animation-delay: 3s;
        }
        .sea .wave:nth-of-type(12) {
            width: 119px;
            bottom: 15px;
            left: 64vw;
            opacity: 0.2;
            -webkit-animation-delay: 3s;
            animation-delay: 3s;
        }
        .sea .wave:nth-of-type(13) {
            width: 116px;
            bottom: 91px;
            left: 88vw;
            opacity: 0.2;
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
        }
        .sea .wave:nth-of-type(14) {
            width: 96px;
            bottom: 140px;
            left: 52vw;
            opacity: 0.2;
            -webkit-animation-delay: 3s;
            animation-delay: 3s;
        }
        .sea .wave:nth-of-type(15) {
            width: 134px;
            bottom: 102px;
            left: 44vw;
            opacity: 0.1;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }
        .sea .wave:nth-of-type(16) {
            width: 132px;
            bottom: 72px;
            left: 92vw;
            opacity: 0.2;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }
        .sea .wave:nth-of-type(17) {
            width: 117px;
            bottom: 163px;
            left: 31vw;
            opacity: 0.4;
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
        }
        .sea .wave:nth-of-type(18) {
            width: 116px;
            bottom: 99px;
            left: 42vw;
            opacity: 0.5;
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
        }
        .sea .wave:nth-of-type(19) {
            width: 136px;
            bottom: 41px;
            left: 11vw;
            opacity: 0.3;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }
        .sea .wave:nth-of-type(20) {
            width: 119px;
            bottom: 161px;
            left: 21vw;
            opacity: 0.5;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }
        .sea .wave:nth-of-type(21) {
            width: 125px;
            bottom: 89px;
            left: 19vw;
            opacity: 0.3;
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
        }
        .sea .wave:nth-of-type(22) {
            width: 124px;
            bottom: 109px;
            left: 80vw;
            opacity: 0.4;
            -webkit-animation-delay: 3s;
            animation-delay: 3s;
        }
        .sea .wave:nth-of-type(23) {
            width: 93px;
            bottom: 35px;
            left: 45vw;
            opacity: 0.4;
            -webkit-animation-delay: 3s;
            animation-delay: 3s;
        }
        .sea .wave:nth-of-type(24) {
            width: 146px;
            bottom: 6px;
            left: 86vw;
            opacity: 0.5;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }
        .sea .wave:nth-of-type(25) {
            width: 124px;
            bottom: 67px;
            left: 47vw;
            opacity: 0.2;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }
        .sea .wave:nth-of-type(26) {
            width: 150px;
            bottom: 101px;
            left: 95vw;
            opacity: 0.3;
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
        }
        .sea .wave:nth-of-type(27) {
            width: 149px;
            bottom: 6px;
            left: 37vw;
            opacity: 0.5;
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
        }
        .sea .wave:nth-of-type(28) {
            width: 54px;
            bottom: 25px;
            left: 13vw;
            opacity: 0.2;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }
        .sea .wave:nth-of-type(29) {
            width: 66px;
            bottom: 139px;
            left: 91vw;
            opacity: 0.2;
            -webkit-animation-delay: 3s;
            animation-delay: 3s;
        }
        .sea .wave:nth-of-type(30) {
            width: 149px;
            bottom: 29px;
            left: 92vw;
            opacity: 0.2;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }

        .boat {
            width: 90px;
            height: 90px;
            bottom: 90px;
            -webkit-animation: boat100s linear infinite;
            animation: boat100s linear infinite;
        }
        .boat:after {
            background-image: linear-gradient(90deg, rgba(214, 217, 246, 0.7) 30%, rgba(255, 255, 255, 0) 100%);
            width: 200px;
            height: 8px;
            top: 105px;
            left: 20px;
            border-radius: 40%;
            z-index: -1;
        }
        .boat:before {
            width: 92px;
            height: 50px;
            left: 25px;
            bottom: -70px;
            background-image: linear-gradient(tobottom, rgba(41, 40, 76, 0.8) 30%, rgba(41, 40, 76, 0) 100%);
            z-index: -1;
            -webkit-animation: boatShadow100s linear infinite;
            animation: boatShadow100s linear infinite;
        }
        .boat .base {
            width: 110px;
            height: 25px;
            bottom: -20px;
            -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
            background-color: #4c4b82;
        }
        .boat .sail:nth-child(1) {
            width: 90px;
            height: 80px;
            left: 5px;
            -webkit-clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
            clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
            background: linear-gradient(#b9befa 0%, #4c4b82 60%);
        }
        .boat .sail:nth-child(2) {
            width: 80px;
            height: 70px;
            left: 15px;
            bottom: 10px;
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
            -webkit-clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
            clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
            background: linear-gradient(#b9befa 0%, #4c4b82 60%);
        }

        .moon {
            width: 80px;
            height: 80px;
            top: 25%;
            right: 10%;
            border-radius: 50%;
            z-index: 2;
            background-color: #d6d9f6;
            box-shadow: 0 0 10px #d6d9f6, 0 0 20px #d6d9f6, 0 0 30px #d6d9f6, 0 0 40px #d6d9f6, 0 0 50px #75e2fa, 0 0 100px #d6d9f6;
        }

        .stars {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
        }
        .stars .star {
            border-radius: 50%;
            background-color: #b9befa;
            -webkit-animation: twinkle5s linear infinite;
            animation: twinkle5s linear infinite;
        }
        .stars .star:nth-of-type(1) {
            width: 2px;
            height: 2px;
            top: 89vh;
            left: 30vw;
            -webkit-animation-delay: 4s;
            animation-delay: 4s;
        }
        .stars .star:nth-of-type(2) {
            width: 2px;
            height: 2px;
            top: 94vh;
            left: 94vw;
            -webkit-animation-delay: 3s;
            animation-delay: 3s;
        }
        .stars .star:nth-of-type(3) {
            width: 3px;
            height: 3px;
            top: 20vh;
            left: 70vw;
            -webkit-animation-delay: 5s;
            animation-delay: 5s;
        }
        .stars .star:nth-of-type(4) {
            width: 3px;
            height: 3px;
            top: 51vh;
            left: 88vw;
            -webkit-animation-delay: 4s;
            animation-delay: 4s;
        }
        .stars .star:nth-of-type(5) {
            width: 1px;
            height: 1px;
            top: 73vh;
            left: 89vw;
            -webkit-animation-delay: 3s;
            animation-delay: 3s;
        }
        .stars .star:nth-of-type(6) {
            width: 3px;
            height: 3px;
            top: 54vh;
            left: 2vw;
            -webkit-animation-delay: 5s;
            animation-delay: 5s;
        }
        .stars .star:nth-of-type(7) {
            width: 3px;
            height: 3px;
            top: 49vh;
            left: 60vw;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }
        .stars .star:nth-of-type(8) {
            width: 4px;
            height: 4px;
            top: 18vh;
            left: 20vw;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }
        .stars .star:nth-of-type(9) {
            width: 3px;
            height: 3px;
            top: 34vh;
            left: 53vw;
            -webkit-animation-delay: 2s;
            animation-delay: 2s;
        }
        .stars .star:nth-of-type(10) {
            width: 4px;
            height: 4px;
            top: 31vh;
            left: 24vw;
            -webkit-animation-delay: 3s;
            animation-delay: 3s;
        }
        .stars .star:nth-of-type(11) {
            width: 3px;
            height: 3px;
            top: 45vh;
            left: 38vw;
            -webkit-animation-delay: 4s;
            animation-delay: 4s;
        }
        ..........完整代码请登录后点击上方下载按钮下载查看
css实现灯塔效果

网友评论0

css+div布局实现自适应大气高科技蓝色企业官网布局代码

css实现立体渐变按钮效果代码

svg+css实现立体书签checkbox点击开关效果代码

css+js实现老式大屁股电视机屏幕无信号闪屏动画效果代码

css布局逼真键盘按键效果代码

css+js实现3d翻转数字时钟显示时间代码

js+css实现炫酷科幻密码输入框破解锁定ui动态界面代码

HTMLElement自定义标签实现盲文密码效果代码

css实现服务器500故障灭火交互动画页面代码

css+js实现平滑折叠堆积下拉菜单效果代码
