svg布局页面帆船白云城堡动画效果-html代码-BFW代码库

svg布局页面帆船白云城堡动画效果

代码语言：html

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

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

    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
        }

        svg {
            position: absolute;
            min-width: 100vw;
            max-height: 100vh;
            margin: 0 auto;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>

</head>
<body translate="no">
    <svg id="OBJECTS" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 757.1 528">
        <defs>
            <clipPath id="clip-path" transform="translate(-16 -17.3)">
                <path d="M275 484.5h452c6.2 0 11.2-4.7 11.2-10.4l-.4-443.8c0-7.8-7.7-13.7-16-12.3-120.1 20.4-96.6 105-153.4 109.8a980 980 0 01-101.3 1c-58.3-1.8-104 45.7-94.7 98.7a92.2 92.2 0 01.3 39.6c-13 43.8-101.3 23-119 128.6a121 121 0 0021.2 88.8" fill="none" />
            </clipPath>
            <style>
                .cls-2 {
                    fill: #fff
                }

                .cls-4 {
                    fill: #f4dc9e
                }

                .cls-5 {
                    opacity: .4
                }

                .cls-6 {
                    fill: #61bce8
                }

                .cls-7 {
                    font-size: 9.32px;
                    letter-spacing: .04em;
                    fill: #473345;
                    font-family: Roboto-Bold, Roboto;
                    font-weight: 700
                }

                .cls-8 {
                    letter-spacing: .01em
                }

                .cls-22,
                .cls-25 {
                    fill: #22457d
                }

                .cls-25 {
                    opacity: .38
                }

                .cls-26 {
                    fill: #dae4ea
                }

                .cls-27 {
                    fill: #196cb0
                }

                .cls-28 {
                    fill: #bfcdd8
                }

                .cls-29 {
                    fill: #b5c1c9
                }

                .cls-31 {
                    fill: #22457f
                }

                .cls-33 {
                    fill: #1b7fbd
                }

                .cls-37 {
                    fill: #f9ecd4
                }
            </style>
        </defs>
        <path class="cls-2" d="M723.4 488.4H30.2a14.2 14.2 0 01-14.3-14v-443a14.2 14.2 0 0114.3-14h693.2a14.2 14.2 0 0114.2 14v443a14.2 14.2 0 01-14.2 14z" transform="translate(-16 -17.3)" />
        <g opacity=".6">.........完整代码请登录后点击上方下载按钮下载查看