gsap实现UFO飞碟动画
代码语言：html
所属分类：动画
代码描述：gsap实现幻灯片效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#cow{
width: 300px;
height: auto;
position: absolute;
top: 600px;
left: 250px;
}
body {
background-image: linear-gradient(rgb(9, 28, 87), rgba(9, 28, 7, 0.9));
}
</style>
</head>
<body translate="no">
<img id="cow" src="https://i.imgur.com/d6I3VOC.png">
<svg width="872" height="1040" viewBox="0 0 872 1040" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="ufo" d="M419.5 108C412.18 114.223 404.5 127.5 404.5 127.5L660.5 162.5C660.5 162.5 657.325 151.576 653.5 145.5C646.481 134.35 638.667 130.992 627.5 124C613.853 115.454 604.733 113.218 589.5 108C574.579 102.888 552.5 97.4999 550.5 97.4999C548.5 97.5 517.5 93.9999 503 93.9999C488.5 93.9999 470.5 92.4999 459 93.9999C447.5 95.5 431.969 97.3996 419.5 108Z" fill="url(#paint0_linear)" stroke="#373D40" stroke-width="2" />
<g filter="url(#filter0_i)">
<ellipse class="ufo" cx="522.17" cy="225.112" rx="221.168" ry="110.621" transform="rotate(8.72449 522.17 225.112)" fill="url(#paint1_linear)" />
</g>
<path class="ufo" d="M739.297 258.432C734.796 287.761 706.853 311.06 664.426 324.721C622.094 338.352 565.805 342.206 505.618 332.97C445.432 323.734 392.889 303.178 356.592 277.481C320.214 251.727 300.543 221.121 305.044 191.792C309.545 162.462 337.488 139.163 379.915 125.502C422.246 111.872 478.535 108.017 538.722 117.254C598.909 126.49 651.452 147.045 687.748 172.742C724.127 198.497 743.798 229.102 739.297 258.432Z" stroke="#373D40" stroke-width="3" />
<g filter="url(#filter1_i)">
<ellipse class="ufo" cx="513.5" cy="243.301" rx="168.006" ry="80.4812" transform="rotate(8.97012 513.5 243.301)" fill="#A0AAB2" />
</g>
<ellipse class="ufo" cx="513.5" cy="243.301" rx="168.006" ry="80.4812" transform="rotate(8.97012 513.5 243.301)" stroke="#D9E5EF" stroke-width="3" />
<path class="ufo" d="M591.807 274.445C590.234 284.39 580.068 292.777 563.211 297.706C546.558 302.575 524.252 303.756 500.284 299.964C476.315 296.171 455.463 288.161 441.127 278.389C426.615 268.496 419.536 257.38 421.11 247.435C422.683 237.49 432.849 229.103 449.706 224.174C466.359 219.305 488.665 218.124 512.633 221.916C536.602 225.709 557.454 233.719 571.79 243.491C586.302 253.384 593.381 264.5 591.807 274.445Z" fill="#BBC462" stroke="#CDDB8F" stroke-width="5" />
<ellipse class="light ufo" cx="502" cy="137" rx="16" ry="11" fill="white" />
<ellipse class="light ufo" cx="334.5" cy="197.5" rx="12.791" ry="6.39461" transform="rotate(26.9689 334.5 197.5)" fill="white" />
<ellipse class="light ufo" cx="443.378" cy="313.985" rx="7.83786" ry="3.23448" transform="rotate(13.5835 443.378 313.985)" fill="white" />
<ellipse class="light ufo" cx="578.656" cy="332.885" rx="6.54039" ry="2.57555" transform="rotate(2.74142 578.656 332.885)" fill="white" />
<ellipse class="light ufo" cx="509.089" cy="328.902" rx="7.83786" ry="3.23448" transform="rotate(4.973 509.089 328.902)" fill="white" />
<ellipse class="light ufo" cx="383.85" cy="285.92" rx="8.06855" ry="3.65868" transform="rotate(26.9689 383.85 285.92)" fill="white" />
<ellipse class="light ufo" cx="341.734" cy="248" rx="11.576" ry="5.32984" transform="rotate(26.9689 341.734 248)" fill="white" />
<ellipse class="light ufo" cx="384" cy="151.5" rx="15.8243" ry="9.47841" transform="rotate(26.2508 384 151.5)" fill="#FFFDFD" />
<ellipse class="light ufo" cx="643.5" cy="319.5" rx="10.5" ry="5.5" transform="rotate(-9.30653 643.5 319.5)" fill="white" />
<ellipse class="light ufo" cx="692" cy="287.5" rx="13" ry="8.5" fill="white" />
<ellipse class="light ufo" cx="700.5" cy="234" rx="16.5" ry="9" fill="white" />
<ellipse class="light ufo" cx="633&q.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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