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-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" />
<path fill="#2f98d1" d="M236.1 356.1h486.2V479H236.1z" />
<path id="_Wave_" data-name="<Wave>" class="cls-6" d="M254.2 463s339.1-54 508.8-17.3v99.6L264.6 530z" transform="translate(-16 -17.3)" />
<path d="M235.6 475s339.1-53.8 508.8-17.2v56.8H246z" transform="translate(-16 -17.3)" opacity=".4" fill="#2f98d2" />
</g>
<g id="_Boat_l_" data-name="<Boat_l>">
<path class="cls-25" d="M337.3 409.4h79.8a4.6 4.6 0 014.6 4.6v.4a4.6 4.6 0 01-4.6 4.6h-78.3a7 7 0 01-4.5-1.6 4.5 4.5 0 013-8z" transform="translate(-16 -17.3)" />
<path class="cls-26" d="M360.1 297.1l-39.6 88.4H360V297z" />
<path class="cls-2" d="M360.1 302l22.2 83.7-22.2-.2V302z" />
<path class="cls-22" d="M332.2 406.7h84.6v9.5h-72.6a5.6 5.6 0 01-4-1.6z" transform="translate(-16 -17.3)" />
<path class="cls-27" d="M416.8 406.7H364a4 4 0 014-4h48.8z" transform="translate(-16 -17.3)" />
<path class="cls-28" d="M348.1 392.1h52.8v.8h-52.8z" />
</g>
<g id="_Boat_s_" data-name="<Boat_s>">
<path class="cls-25" d="M663.5 403.4h34.2a2 2 0 012 2v.2a2 2 0 01-2 1.9h-33.6a3 3 0 01-2-.7 2 2 0 011.4-3.4z" transform="translate(-16 -17.3)" />
<path class="cls-26" d="M664.2 345.3l-17 38h17v-38z" />
<path class="cls-2" d="M664.2 347.4l9.5 36-9.5-.1v-36z" />
<path class="cls-22" d="M661.2 402.2h36.4v4.1h-31.2a2.4 2.4 0 01-1.7-.7z" transform="translate(-16 -17.3)" />
<path class="cls-27" d="M660.4 383.3h21.3v1.6H659v-.2a1.4 1.4 0 011.4-1.4z" />
<path class="cls-28" d="M659 386.1h22.7v.3H659z" />
</g>
<path class="cls-29" d="M461.7 262.6H722v78.3H461.7z" />
<path fill="#d3dadd" d="M461.7 262.6H722v39.9H461.7z" />
<rect class="cls-2" x="665.3" y="97.6" width="1.1" height="7.6" rx=".2" />
<rect class="cls-2" x="663.6" y="99.3" width="4.3" height="1.1" rx=".2" />
<rect class="cls-27" x="661.3" y="103.4" width="9" height="6.5" rx="2.7" />
<rect class="cls-31" x="661.3" y="103.4" width="9" height="6.5" rx="2.7" />
<path class="cls-27" d="M657.7 146.2c0-13 10.7-23.5 24-23.5s24 10.5 24 23.5" transform="translate(-16 -17.3)" />
<g opacity=".4">
<path class="cls-31" d="M681.7 122.7a24.4 24.4 0 00-3.4.3 23.7 23.7 0 0120.6 23.2h6.9c0-13-10.8-23.5-24-23.5z" transform="translate(-16 -17.3)" />
</g>
<circle class="cls-33" cx="649.3" cy="116.9" r=".9" />
<circle class="cls-33" cx="682.9" cy="116.9" r=".9" />
<circle class="cls-33" cx="665.8" cy="118.5" r=".9" />
<path class="cls-28" d="M639.3 127.9h17.4v23.3h-17.4z" />
<path class="cls-2" d="M656.7 127.9h17.4v23.3h-17.4z" />
<path class="cls-28" d="M674.1 127.9h17.4v23.3h-17.4z" />
<path class="cls-2" d="M658.5 126.2h32.1v1.7h-32.1z" />
<path class="cls-29" d="M640.7 126.2h17.8v1.7h-17.8z" />
<path class="cls-29" d="M673 126.2h17.8v1.7H673z" />
<path class="cls-22" d="M647.8 131.7h1.1a2.3 2.3 0 012.3 2.2v10.7h-5.6V134a2.3 2.3 0 012.2-2.2z" />
<path class="cls-22" d="M664.9 131.7h1.1a2.3 2.3 0 012.3 2.2v10.7h-5.7V134a2.3 2.3 0 012.3-2.2z" />
<path class="cls-22" d="M682.9 131..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0