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">
            <path class="cls-4" d="M275 488.4h452c6.2 0 11.2-4.8 11.2-10.6l-.4-447.4c0-7.8-7.7-13.8-16-12.4-120.1 20.5-96.6 106-153.4 110.7a968.9 968.9 0 01-101.3 1c-58.3-1.8-104 46-94.7 99.5a93.7 93.7 0 01.3 40c-13 44-101.3 23.2-119 129.6a122.8 122.8 0 0021.2 89.6" transform="translate(-16 -17.3)" />
            <ellipse class="cls-4" cx="312" cy="235.5" rx="23.4" ry="23.1" />
        </g>
        <g class="cls-5">
            <path class="cls-6" d="M132.8 94.2H20.2a3.6 3.6 0 01-3.6-3.6V41.5a3.6 3.6 0 013.6-3.6h112.6a23.6 23.6 0 0123.6 23.6v9a23.6 23.6 0 01-23.6 23.7z" transform="translate(-16 -17.3)" />
        </g>
        <path class="cls-6" d="M62.9 94.2H20.2a3.6 3.6 0 01-3.6-3.6V41.5a3.6 3.6 0 013.6-3.6h42.7a23.6 23.6 0 0123.6 23.6v9a23.6 23.6 0 01-23.6 23.7z" transform="translate(-16 -17.3)" /><text class="cls-7" transform="matrix(1.02 0 0 1 376.5 47.8)">HOME</text><text class="cls-7" transform="matrix(1.02 0 0 1 440 47.8)">ABOU<tspan class="cls-8" x="26.3" y="0">T</tspan>
            <tspan x="32.1" y="0"> US</tspan>
        </text><text class="cls-7" transform="matrix(1.02 0 0 1 525.2 47.8)">CENTRAL</text>
        <path class="cls-6" d="M683.8 73.9H628a12.7 12.7 0 01-12.8-12.5A12.7 12.7 0 01628 48.9h55.7a12.7 12.7 0 0112.8 12.5 12.7 12.7 0 01-12.8 12.5z" transform="translate(-16 -17.3)" /><text class="cls-7" transform="matrix(1.02 0 0 1 616.7 47.8)">CON<tspan x="20.2" y="0" letter-.........完整代码请登录后点击上方下载按钮下载查看