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

代码语言：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-spacing="0em">T</tspan>
            <tspan x="25.8" y="0">A</tspan>
            <tspan x="32.5" y="0" letter-spacing="0em">C</tspan>
            <tspan class="cls-8" x="38.8" y="0">T</tspan>
        </text>
        <path class="cls-2" d="M98 72.9a2.7 2.7 0 01-.4 0 1.7 1.7 0 01-1.1-.7A1.8 1.8 0 0196 71a1.9 1.9 0 010-.3V60.4a1.9 1.9 0 01.5-1.3 2 2 0 012.8 0 1.9 1.9 0 01.5 1.3V69h3.9a2 2 0 012 2 1.8 1.8 0 01-.6 1.3 2 2 0 01-1.4.6z" transform="translate(-16 -17.3)" />
        <path class="cls-2" d="M108.7 71.4a5.7 5.7 0 01-1.7-4.2v-2.8a5.7 5.7 0 011.7-4.3 5.7 5.7 0 017.7 0 5.8 5.8 0 011.7 4.3h-4a1.9 1.9 0 00-.5-1.6 2.1 2.1 0 00-2.1 0 1.9 1.9 0 00-.6 1.6v2.9a1.8 1.8 0 00.6 1.5 2 2 0 002.1 0 1.8 1.8 0 00.6-1.5v-2.9h3.9v2.9a5.7 5.7 0 01-1.7 4.2 5.7 5.7 0 01-7.7 0z" transform="translate(-16 -17.3)" />
        <path class="cls-2" d="M122.5 71.5a5.5 5.5 0 01-1.7-4.1v-3.1a5.5 5.5 0 011.7-4.2 5.7 5.7 0 014-1.5 5.4 5.4 0 012.8.8 6.4 6.4 0 011.7 1.5 2.1 2.1 0 01.4 1.2 1.9 1.9 0 01-.6 1.4 2.2 2.2 0 01-1.4.5 1.5 1.5 0 01-1.4-.6 2.5 2.5 0 01-.2-.4 1 1 0 00-.6-.5 4.5 4.5 0 00-.7 0 2 2 0 00-1.1.2 1.7 1.7 0 00-.6 1.6v3.1a1.7 1.7 0 00.5 1.5 1.8 1.8 0 001 .3 2.4 2.4 0 001.3-.3 2.2 2.2 0 00.6-.7V68a2 2 0 01-2-2 1.8 1.8 0 01.6-1.3 1.9 1.9 0 011.3-.5h1.8a2 2 0 011.4.5 1.8 1.8 0 01.5 1.4v2.5a1.8 1.8 0 010 .6 5.9 5.9 0 01-2.3 2.8 5.5 5.5 0 01-3.1 1 5.6 5.6 0 01-4-1.5z" transform="translate(-16 -17.3)" />
        <path class="cls-2" d="M136 71.4a5.7 5.7 0 01-1.7-4.2v-2.8A5.7 5.7 0 01136 60a5.7 5.7 0 017.8 0 5.8 5.8 0 011.6 4.3h-3.9a1.9 1.9 0 00-.6-1.6 2.1 2.1 0 00-2 0 1.9 1.9 0 00-.7 1.6v2.9a1.8 1.8 0 00.6 1.5 2 2 0 002.1 0 1.8 1.8 0 00.6-1.5v-2.9h4v2.9a5.7 5.7 0 01-1.8 4.2 5.7 5.7 0 01-7.7 0z" transform="translate(-16 -17.3)" />
        <g id="WELCOME"><text transform="matrix(1.02 0 0 1 41.8 200)" font-size="40.6" font-family="Roboto-Light,Roboto" font-weight="300" fill="#473345">WELCOME</text></g><text transform="matrix(1.02 0 0 1 41.8 238.2)" font-size="39.4" font-family="Roboto-Black,Roboto" font-weight="800" fill="#473345">
            <tspan letter-spacing="0em">T</tspan>
            <tspan x="24.3" y="0">O GREECE</tspan>
        </text><text transform="matrix(1.02 0 0 1 42 259.5)" font-size="9.5" font-family="Roboto-Regular,Roboto" fill="#473345">Lorem ipsum dolor sit amet, consectetuer adipisc<tspan x="209.4" y="0">-</tspan>
            <tspan x="0" y="11.2">ing elit, sed diam nonummy nibhui smod tincidunt ut </tspan>
            <tspan x="0" y="22.5">laoreet laor dolore magna.</tspan>
        </text>
        <path class="cls-6" d="M151.6 361.4H73A14.5 14.5 0 0158.4 347a14.5 14.5 0 0114.5-14.4h78.7a14.5 14.5 0 0114.6 14.4 14.5 14.5 0 01-14.6 14.3z" transform="translate(-16 -17.3)" /><text transform="matrix(1.02 0 0 1 72.3 332.5)" font-size="9.4" letter-spacing="0em" font-family="Roboto-Bold,Roboto" font-weight="700" fill="#fff">DISC<tspan x="22.2" y="0">O</tspan>
            <tspan x="28.9" y="0">VER</tspan>
        </text>
        <g clip-path="url(#clip-path)">
            <g opacity=".2">
                <path d="M532.6 299.2a16 16 0 00-12.7-4.8c-2.5 0-5-.2-6.4-1.5l-15.9-13.6a11.4 11.4 0 00-14-.1l-6.2 6a38.6 38.6 0 01-51.8 1.7 11.3 11.3 0 00-11.8-.7l-12 6.8a14.2 14.2 0 01-15.9-1.4l-14.8-12.2a11.3 11.3 0 00-14 .2l-15.9 13.6c-1.4 1.3-4 1.6-6.4 1.5-5-.2-9.9 1.6-12.7 4.8a1337 1337 0 00-8.9 10.3c-21.7 25.6 251.9 27.5 229.9 1.6l-10.5-12.2z" transform="translate(-16 -17.3)" fill="#9e4226" />
            </g>
            <path d="M773 270.4s-72.7-11.4-202.8 12.5-105.5 37-288.7 23.4c0 0-45.6-5.2-75-16.6v89.6h38.3v114.9l493.4-.2V379.3H765z" transform="translate(-16 -17.3)" fill="#f3dda1" />
            <path class="cls-22" d="M236.1 341h486.2v138H236.1z" />
            &l.........完整代码请登录后点击上方下载按钮下载查看
svg布局页面帆船白云城堡动画效果

网友评论0

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

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

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

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

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

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

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

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

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

css has使用示例代码
