svg+css实现游轮日夜交替旅行动画效果代码
代码语言：html
所属分类：动画
代码描述：svg+css实现游轮日夜交替旅行动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
:root {
--morning-sky: hsl(1, 70%, 70%);
--dawn-sky: hsl(326, 26%, 44%);
--night-sky: hsl(256, 52%, 25%);
--day-duration: 12s;
--day-cycle-animation-config: var(--day-duration) ease-in-out infinite;
--sea-duration: 6s;
--ship-movement-duration: calc(var(--sea-duration) / 5);
}
body {
height: 100vh;
padding: 0;
margin: 0;
}
.scene {
height: 100%;
display: grid;
place-items: center;
}
svg {
width: 80%;
height: 80%;
padding: 12px;
box-shadow: 2px 10px 16px 0px rgba(0, 0, 0, 0.6);
animation: sky var(--day-duration) linear infinite;
}
@keyframes sky {
0% {
background: var(--morning-sky);
}
20% {
background: var(--morning-sky);
}
35% {
background: var(--dawn-sky);
}
50% {
background: var(--night-sky);
}
70% {
background: var(--night-sky);
}
85% {
background: var(--dawn-sky);
}
100% {
background: var(--morning-sky);
}
}
#ship,
#flag {
animation: ship var(--ship-movement-duration) ease-in-out infinite alternate;
}
@keyframes ship {
from {
transform: translateY(0);
}
to {
transform: translateY(4%);
}
}
#sea {
animation: sea var(--sea-duration) linear infinite;
}
@keyframes sea {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
#sea-clone {
animation: sea-clone var(--sea-duration) linear infinite;
}
@keyframes sea-clone {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
#sun {
left: 50%;
animation: sun var(--day-cycle-animation-config);
}
@keyframes sun {
0% {
transform: translateY(0);
opacity: 1;
}
20% {
transform: translateY(0);
opacity: 1;
}
50% {
transform: translateY(100%);
opacity: 0;
}
70% {
transform: translateY(100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
#moon {
animation: moon var(--day-cycle-animation-config);
}
@keyframes moon {
0% {
transform: translateY(100%);
opacity: 0;
}
20% {
transform: translateY(100%);
opacity: 0;
}
50% {
transform: translateY(0);
opacity: 1;
}
70% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(100%);
opacity: 0;
}
}
</style>
</head>
<body translate="no" >
<main class="scene">
<svg
width="796"
height="525"
viewBox="0 0 796 525"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="undraw_Yacht_re_kkai 1" clip-path="url(#clip0)">
<path
id="moon"
d="M225.189 209C291.567 209 179.209 209 164.786 106.5C157.094 4 291.567 4 225.189 4C158.81 4 105 49.8908 105 106.5C105 163.109 158.81 209 225.189 209Z"
fill="#FCFF63"
/>
<path
id="flag"
d="M539.247 37.9881C538.406 34.6843 535.667 32.2125 532.812 30.3499C529.956 28.4872 526.814 26.9902 524.375 24.6071C521.937 22.2241 520.297 18.6005 521.429 15.3845C522.805 11.476 527.389 9.91408 531.397 8.86031C494.717 4.91715 457.858 2.86091 420.967 2.69973C420.136 1.57281 418.969 0.73737 417.635 0.312748C416.301 -0.111875 414.866 -0.103969 413.537 0.335346C412.207 0.774661 411.051 1.62291 410.232 2.75893C409.413 3.89495 408.974 5.26061 408.978 6.66088V125.225H422.3V52.393C453.943 52.4697 485.585 52.5463 517.228 52.6229C522.351 52.6353 527.682 52.6027 532.288 50.3589C536.895 48.1153 540.513 42.953 539.247 37.9881Z"
fill="#b4b4b4"
/>
<g id="sea-clone">
<path
id="Vector"
d="M283.754 455.605H3.99652C2.93658 455.605 1.92004 455.183 1.17055 454.434C0.421053 453.684 0 452.668 0 451.608C0 450.548 0.421053 449.532 1.17055 448.782C1.92004 448.033 2.93658 447.611 3.99652 447.611H283.754C284.814 447.611 285.83 448.033 286.58 448.782C287.329 449.532 287.75 450.548 287.75 451.608C287.75 452.668 287.329 453.684 286.58 454.434C285.83 455.183 284.814 455.605 283.754 455.605Z"
fill="#77E7FF"
/>
<path
id="Vector_2"
d="M159.861 479.584H43.9618C42.9019 479.584 41.8854 479.163 41.1359 478.413C40.3864 477.664 39.9653 476.647 39.9653 475.587C39.9653 474.527 40.3864 473.511 41.1359 472.761C41.8854 472.012 42.9019 471.591 43.9618 471.591H159.861C160.921 471.591 161.938 472.012 162.687 472.761C163.437 473.511 163.858 474.527 163.858 475.587C163.858 476.647 163.437 477.664 162.687 478.413C161.938 479.163 160.921 479.584 159.861 479.584Z"
fill="#77E7FF"
/>
<path
id="Vector_3"
d="M671.417 455.605H391.66C390.6 455.605 389.584 455.183 388.834 454.434C388.085 453.684 387.663 452.668 387.663 451.608C387.663 450.548 388.085 449.532 388.834 448.782C389.584 448.033 390.6 447.611 391.66 447.611H671.417C672.477 447.611 673.494 448.033 674.243 448.782C674.993 449.532 675.414 450.548 675.414 451.608C675.414 452.668 674.993 453.684 674.243 454.434C673.494 455.183 672.477 455.605 671.417 455.605Z"
fill="#77E7FF"
/>
<path
id="Vector_4"
d="M499.566 479.584H219.809C218.749 479.584 217.733 479.163 216.983 478.413C216.234 477.664 215.813 476.647 215.813 475.587C215.813 474.527 216.234 473.511 216.983 472.761C217.733 472.012 218.749 471.591 219.809 471.591H499.566C500.626 471.591 501.643 472.012 502.392 472.761C503.142 473.511 503.563 474.527 503.563 475.587C503.563 476.647 503.142 477.664 502.392 478.413C501.643 479.163 500.626 479.584 499.566 479.584Z"
fill="#77E7FF"
/>
<path
id="Vector_5"
d="M283.754 500.899H3.99654C2.93768 500.897 1.92278 500.475 1.17465 499.726C0.426522 498.976 0.00631714 497.961 0.00631714 496.902C0.00631714 495.843 0.426522 494.828 1.17465 494.078C1.92278 493.329 2.93768 492.907 3.99654 492.905H283.754C284.813 492.907 285.827 493.329 286.576 494.078C287.324 494.828 287.744 495.843 287.744 496.902C287.744 497.961 287.324 498.976 286.576 499.726C285.827 500.475 284.813 500.897 283.754 500.899Z"
fill="#77E7FF"
/>
<path
id="Vector_6"
d="M451.608 524.878H335.709C334.649 524.878 333.632 524.457 332.883 523.707C332.133 522.958 331.712 521.941 331.712 520.881C331.712 519.821 332.133 518.805 332.883 518.055C333.632 517.306 334.649 516.885 335.709 516.885H451.608C452.668 516.885 453.684 517.306 454.434 518.055C455.183 518.805 455.605 519.821 455.605 520.881C455.605 521.941 455.183 522.958 454.434 523.707C453.684 524.457 452.668 524.878 451.608 524.878Z"
fill="#77E7FF"
/>
<path
id="Vector_7"
d="M201.159 524.878H85.2593C84.1994 524.878 83.1828 524.457 82.4333 523.707C81.6839 522.958 81.2628 521.941 81.2628 520.881C81.2628 519.821 81.6839 518.805 82.4333 518.055C83.1828 517.306 84.1994 516.885 85.2593 516.885H201.159C202.219 516.885 203.235 517.306 203.985 518.055C204.734 518.805 205.155 519.821 205.155 520.881C205.155 521.941 204.734 522.958 203.985 523.707C203.235 524.457 202.219 524.878 201.159 524.878Z"
fill="#77E7FF"
/>
<path
id="Vector_8"
d="M671.417 500.899H391.66C390.6 500.899 389.584 500.477 388.834 499.728C388.085 498.979 387.663 497.962 387.663 496.902C387.663 495.842 388.085 494.826 388.834 494.076C389.584 493.327 390.6 492.905 391.66 492.905H671.417C672.476 492.907 673.491 493.329 674.239 494.078C674.987 494.828 675.407 495.843 675.407 496.902C675.407 497.961 674.987 498.976 674.239 499.726C673.491 500.475 672.476 500.897 671.417 500.899Z"
fill="#77E7FF"
/>
<path
id="Vector_9"
d="M791.313 524.878H511.556C510.496 524.878 509.479 524.457 508.73 523.707C507.98 522.958 507.559 521.941 507.559 520.881C507.559 519.821 507.98 518.805 508.73 518.055C509.479 517.306 510.496 516.885 511.556 516.885H791.313C792.373 516.885 793.39 517.306 794.139 518.055C794.889 518.805 795.31 519.821 795.31 520.881C795.31 521.941 794.889 522.958 794.139 523.707C793.39 524.457 792.373 524.878 791.313 524.878Z"
fill="#77E7FF"
/>
</g>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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