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-.........完整代码请登录后点击上方下载按钮下载查看
css实现灯塔效果

网友评论0

css+div布局模拟导航最佳路线图代码

svg+css实现20种播放按钮动画交互效果代码

tailwind布局实现深度研究报告模板代码

css+div布局实现手机目的地导航线路明细代码

js+css实现可视化文字圆环环绕动画按钮生成css及html代码

div+css布局简洁数据展示卡片效果代码

div+css布局实习精简搜索类app的首页ui效果代码

vue3+css实现动态数据配置渲染的3d可翻页数据效果代码

js+css实现简洁立体时钟转动指针显示时间代码

vue3实现暗色周期性待办事项列表代码
