自适应高塔效果-html代码-BFW代码库

自适应高塔效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> Responsive Pagoda</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <style>
        * {
            border: 0;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            background:
            /* land */
            linear-gradient(0deg,#113f66 1.5em,#113f6600 1.5em),
            /* snow part of moutain */
            radial-gradient(100% 100% at center,#e1ecf4 49%,#e1ecf400 50%) calc(50% - 10em) calc(100% - 12em) / 14em 8em,
            radial-gradient(100% 200% at 50% 150%,#e1ecf4 49.75%,#e1ecf400 50%) calc(50% - 10em) calc(100% - 11em) / 55.5em 16em,
            radial-gradient(100% 200% at 50% 0%,#e1ecf4 49.75%,#e1ecf400 50%) calc(50% - 10em) calc(100% - 8em) / 48em 3em,
            /* mountain */
            radial-gradient(100% 100% at center,#5d6d7e 49.75%,#5d6d7e00 50%) calc(50% - 10em) calc(100% + 61em) / 80em 80em,
            /* clouds */
            radial-gradient(100% 100% at center,#fff 49%,#fff0 50%) calc(50% - 26em) calc(100% - 26em) / 12em 2em,
            radial-gradient(100% 100% at center,#fff 49%,#fff0 50%) calc(50% - 12em) calc(100% - 23em) / 12em 2em,
            radial-gradient(100% 100% at center,#fff 49%,#fff0 50%) calc(50% - 6em) calc(100% - 24em) / 12em 2em,
            radial-gradient(100% 100% at center,#fff 49%,#fff0 50%) calc(50% + 18em) calc(100% - 12em) / 18em 6em,
            radial-gradient(100% 100% at center,#fff 49%,#fff0 50%) calc(50% + 24em) calc(100% - 15em) / 18em 6em,
            radial-gradient(100% 100% at center,#fff 49%,#fff0 50%) calc(50.........完整代码请登录后点击上方下载按钮下载查看