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" stroke="#fbb03b" stroke-miterlimit="10" d="M422.47 360.24l-124 316.81" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M415.04 360.4L284.49 674.47" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M407.68 360.56L270.76 671.93" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M400.38 360.71L257.27 669.44" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M393.15 360.86L244.03 667" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M385.98 361.01L231.02 664.59" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M378.87 361.16L218.24 662.23" />
<path fill="#0a3160" d="M371.83 361.31L205.68 659.92" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M364.85 361.46L193.34 657.64" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M357.92 361.6L181.2 655.4" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M351.06 361.75L169.28 653.19" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M344.26 361.89L157.55 651.03" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M337.51 362.03L146.02 648.9" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M330.83 362.17L134.68 646.8" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M324.2 362.31L123.52 644.74" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M317.62 362.45L112.54 642.72" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M101.75 640.72L311.1 362.59" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M304.64 362.73L91.12 638.76" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M298.23 362.86L80.66 636.83" />
<path fill="#0a3160" d="M291.87 363L70.37 634.93" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M285.57 363.13L60.24 633.06" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M279.32 363.26L50.26 631.21" />
<path fill="#0a3160" d="M40.44 629.4l232.68-266.01" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M266.97 363.52L30.76 627.61" />
<path fill="#0a3160" d="M260.87 363.65L21.24 625.86" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M254.82 363.78L11.85 624.12" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M248.82 363.9L2.61 622.42" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M242.87 364.03L-6.5 620.73" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M236.96 364.15L-15.47 619.08" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M231.1 364.28L-24.31 617.44" />
<path fill="none" stroke="#fbb03b" stroke-miterlimit="10" d="M225.29 364.4L-33.03 615.83" />
<path d="M169.05 387.77s58.88-30.92 65.83-32.12 17.62 0 17.62 0l21.8-.53s20.65-4.05 34.2-4.05 6.84 14.13 19 9.36 26.07-10.74 26.07-10.74l41.09-11.93s31.19-7.16 38.22-7.16h126.39s26-4.24 25.14 0 4.26 9.55 11.42 15.51 15.91-4.77 7.16 6 0 12.8-12.85 13.12-8.88 3.58-20.69-1.19-3.36 14.53-18.77 9.55-18.61-6.17-28.15-3.78 0 4-16.7 3.78-6-3.37-26.06 0-31.37-3.9-41.29.87-34.85-9.23-34.85-9.23-13.76-1.19-19.37 0-12.77 0-15.95 1.19-12.34 2.39-14.52 2.39S342 370 338.84 370h-11.33c-4.55 0-.1-1.19-8.69 0s-10.14 1.19-14.53 1.19a79.89 79.89 0 01-15.13-1.19c-7.56-1.19-7-2.39-14.86-3.58a92.84 92.84 0 00-12.59-1.19h-9.21c-6.7 0-7.86-4.77-17.62 0s-8.25 6.37-17.76 12.73-3.09 5.51-15.76 12.71-11.46 4.3-18.52 4.34 1.7 0-7.05 0-6.74-7.24-6.74-7.24z" fill="#0a3160" />
<path d="M279.71 404.91c7.74.87 28.52-5.11 42.53 0s28.84-.86 32.56-3.71 10.91-2 10-7.2 1.16-10.11-10-10.3-23.05 3.37-23.05 3.37-17.27-.69-24.95 0-27.12 1.81-32.78 5-6.07.5-11.7 5.54-14.86 8.35-6 9.34a90 90 0 0017.7 0" fill="#0a3160" />
<path d="M411.56 446.68c4.05.46 14.95-2.68 22.29 0s15.12-.45 17.07-1.94 5.73-1.06 5.23-3.78.61-5.3-5.23-5.4a46.28 46.28 0 00-12.08 1.77s-9.06-.36-13.08 0-14.22.95-17.19 2.6-3.18.26-6.13 2.9-7.8 4.38-3.15 4.9a47.57 47.57 0 009.28 0" fill="#0a3160" />
<g id="hello" fill="#fff">
<path d="M310.83 353.22h-3.59v3.57h-1.68v-8.37h1.68v3.44h3.59v-3.44h1.68v8.37h-1.68z" />
<path d="M317.07 356.9a3.22 3.22 0 01-3.33-3.44 3.18 3.18 0 013.33-3.42 3.11 3.11 0 013.27 3.28 4.73 4.73 0 010 .65h-4.86a1.55 1.55 0 001.52 1.53 1.36 1.36 0 001.33-.8h1.82a3.1 3.1 0 01-3.08 2.2zm-1.62-4.06h3.15a1.48 1.48 0 00-1.58-1.43 1.55 1.55 0 00-1.57 1.43z" />
<path d="M321.57 347.91h1.68v8.88h-1.68z" />
<path d="M324.91 347.91h1.68v8.88h-1.68z" />
<path d="M331.19 356.9a3.43 3.43 0 113.47-3.44 3.33 3.33 0 01-3.47 3.44zm0-1.47a1.77 1.77 0 001.74-2 1.74 1.74 0 00-1.71-2 1.72 1.72 0 00-1.69 2c0 1.35.76 2 1.66 2z" />
<path d="M338.19 348.42H340l1.47 6.5 1.71-6.5H345l1..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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