gsap实现飞机上旅行窗外美景动画切换效果
代码语言：html
所属分类：动画
代码描述：gsap实现飞机上旅行窗外美景动画切换效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body,
html {
margin: 0;
padding: 0;
background: #e0ddd7;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 800px;
height: 600px;
text-align: center;
}
</style>
</head>
<body translate="no">
<div class="box">
<svg id="lettravel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<defs>
<clipPath id="clip-path">
<rect id="n-mask" x="281.5" y="134.5" width="237" height="321" rx="115.4" fill="none" />
</clipPath>
<clipPath id="clip-path-4">
<rect x="281.5" y="134.5" width="237" height="321" rx="115.4" fill="none" stroke="#e5e5e6" stroke-miterlimit="10" stroke-width="16" />
</clipPath>
</defs>
<path id="bg" fill="#e0ddd7" d="M0 0h800v600H0z" />
<rect id="window-back" x="262.3" y="108.5" width="275.39" height="373" rx="137.7" fill="#f2f2f2" />
<g id="night">
<g clip-path="url(#clip-path)">
<rect x="281.5" y="134.5" width="237" height="321" rx="115.4" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="15" />
<path fill="#143e70" d="M216.68 129.03h344.21v243.82H216.68z" />
<g id="n-moon" fill="#fff">
<path d="M394.56 241a24.5 24.5 0 005.18-15.15A24.78 24.78 0 00375 201.06c-.6 0-1.24 0-2 .09l-6 .47 3.67-4.74a30.06 30.06 0 0153.83 18.4 30.19 30.19 0 01-27.69 30l-6 .46z" opacity=".5" />
<path d="M394.49 187.87a27.34 27.34 0 00-21.67 10.64c.71-.06 1.44-.1 2.17-.1a27.4 27.4 0 0121.66 44.18 27.4 27.4 0 00-2.16-54.72z" />
</g>
<g id="n-city">
<path d="M262.3 328.45l65.17-16.71 16.71-7.16s9.55 1.59 8.75 5.57 11.93 6.36 11.93 6.36 19.08-5.57 19.48-5.57 15.66-3.18 15.66-3.18l6.23 4 17.5 4.77s1.64 4.78 4 4.78 31.8-4.78 31.8-4.78l27.58-9.28 5.83 7 53.3-6.46 20.69-12.15L599.54 312l-53.3 173.14-283.94 20.71-74.05-118.54s-7.16-24.66-6.36-27-3.18-18.3 4-22.28 16.7-11.93 16.7-11.93 3.19-8.75 4.78-4l1.59 4.77h11.93c3.18 0 10.34-2.38 10.34-2.38l8.75 4 4 2.38z" fill="#0a3160" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M219.53 364.52l367.06-7.73 58.15 384.2-686.36-126.74 261.15-249.73z" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M-23.63 597.05l663.42 111.22" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M-15.05 588.85l652.54 104.2" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M-6.73 580.89l642.02 97.64" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M1.35 573.16l631.84 91.5" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M9.2 565.66l621.98 85.73" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M16.81 558.37l612.45 80.32" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M24.22 551.29l603.2 75.23" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M31.42 544.41l594.23 70.44" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M38.42 537.71l585.53 65.93" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M45.23 531.2l577.1 61.68" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M51.86 524.86l568.9 57.68" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M58.31 518.69l560.94 53.89" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M64.6 512.68L617.8 563" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M70.72 506.82l545.68 46.95" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M76.69 501.11l538.37 43.75" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M82.51 495.55l531.25 40.72" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M88.19 490.12l524.31 37.86" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M93.72 484.83l517.57 35.14" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M99.13 479.66l510.99 32.57" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M104.4 474.62l504.58 30.12" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M109.55 469.69l498.34 27.8" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M114.58 464.88l492.25 25.6" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M119.49 460.18l486.31 23.5" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M124.29 455.59L604.8 477.1" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M128.99 451.1l474.84 19.61" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M133.58 446.71l469.32 17.81" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M138.07 442.42l463.92 16.09" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M142.46 438.22l458.64 14.45" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M146.75 434.11L600.24 447" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M150.96 430.09l448.45 11.4" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M155.07 426.16l443.53 9.98" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M159.1 422.3l438.71 8.63" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M163.05 418.53l433.99 7.33" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M166.91 414.83l429.39 6.1" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M170.7 411.21l424.87 4.91" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M174.41 407.66l420.45 3.79" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M178.05 404.18l416.12 2.71" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M181.62 400.77l411.88 1.68" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M185.11 397.43l407.74.69" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M188.54 394.15l403.67-.25" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M191.91 390.93l399.67-1.15" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M195.21 387.77l395.77-2.01" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M198.45 384.68l391.93-2.85" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M201.63 381.64L589.8 378" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M204.75 378.65l384.49-4.39" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M207.81 375.72l380.87-5.11" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M210.82 372.85l377.32-5.82" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M213.77 370.02l373.84-6.48" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M216.68 367.25l370.42-7.12" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M577.61 356.98l46.13 380.14" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M568.73 357.16l34.48 376.16" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M559.92 357.35l23.2 372.26" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M551.21 357.53l12.26 368.46" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M542.58 357.71l1.66 364.73" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M534.03 357.89l-8.61 361.07" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M525.56 358.07L507 715.56" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M517.18 358.25l-28.22 353.98" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M508.87 358.42l-37.58 350.54" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M500.65 358.6l-46.67 347.17" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M492.5 358.77l-55.48 343.86" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M484.43 358.94l-64.04 340.62" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M476.43 359.11L404.1 696.56" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M468.51 359.27l-80.39 334.34" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M460.66 359.44l-88.2 331.27" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M452.88 359.6l-95.79 328.28" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M445.17 359.77L342.02 685.09" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M437.54 359.93L327.23 682.36" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M429.97 360.09L312.72 679.68" />
<path fill="none".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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