gsap实现过山车与纪念照片动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap实现过山车与纪念照片动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background-color: #7DBDFC;
}
#path {
stroke: none;
}
#main {
position: absolute;
top: 50%;
left: 50%;
width: 551px;
height: 437px;
transform: translate(-50%, -50%);
}
#main #rollercoaster {
display: block;
margin-left: 50%;
transform: translate(-50%);
}
#main #photo-frame {
position: absolute;
top: 15%;
left: -22%;
transform: rotate(5deg);
box-shadow: 0 0 20px #208BF3;
}
#camera-flash {
opacity: 0;
}
</style>
</head>
<body>
<div id="main">
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="photo-frame">
<g>
<rect width="200" height="200" fill="white" />
<g id="photo" clip-path="url(#clip0_8_89)">
<rect width="180" height="180" transform="translate(10 10)" fill="#7DBDFC" />
<g id="photo-car">
<path id="photo-car-body" fill-rule="evenodd" clip-rule="evenodd" d="M25.6453 110.038C29.3626 110.038 32.3761 113.052 32.3761 116.769V116.769C32.3761 131.638 44.4299 143.692 59.2992 143.692C74.1684 143.692 86.2222 131.638 86.2222 116.769V116.769C86.2222 113.052 89.2357 110.038 92.953 110.038H106.415C110.132 110.038 113.145 113.052 113.145 116.769V116.769C113.145 131.638 125.199 143.692 140.068 143.692C154.938 143.692 166.991 131.638 166.991 116.769V116.769C166.991 113.052 170.005 110.038 173.722 110.038H187.184C198.336 110.038 207.376 119.079 207.376 130.231V190.808C207.376 201.96 198.336 211 187.184 211H-65.6838C-79.9692 211 -89.7373 196.572 -84.4319 183.308L-80.51 173.504C-65.1777 135.173 -28.0532 110.038 13.2304 110.038H25.6453Z" fill="#DB5D5D" />
<path id="photo-go-faster-stripes" fill-rule="evenodd" clip-rule="evenodd" d="M190 162H10V166H190V162ZM190 168H10V172H190V168Z" fill="#FFF175" />
</g>
<path id="photo-front-body" d="M39 96.5C39 85.1782 48.1782 76 59.5 76V76C70.8218 76 80 85.1782 80 96.5V116.5C80 127.822 70.8218 137 59.5 137V137C48.1782 137 39 127.822 39 116.5V96.5Z" fill="#333333" />
<path id="photo-back-body" d="M119.292 96.5C119.292 85.1782 128.47 76 139.792 76V76C151.114 76 160.292 85.1782 160.292 96.5V116.5C160.292 127.822 151.114 137 139.792 137V137C128.47 137 119.292 127.822 119.292 116.5V96.5Z" fill="#605DE4" />
<path id="photo-front-left-arm" d="M43.6385 72.6096C49.7522 82.1687 47.7606 94.7884 39 102V102C39 102 39.5 90.5 30.5 75C25.852 66.9952 21.6041 60.9248 18.5827 56.9258C16.282 53.8807 16.9353 49.3757 20.1505 47.3194V47.3194C23.0168 45.4861 26.8266 46.3236 28.6598 49.19L43.6385 72.6096Z" fill="#333333" />
<path id="photo-back-left-arm" d="M123.93 72.6096C130.044 82.1687 128.052 94.7884 119.292 102V102C119.292 102 119.792 90.5 110.792 75C106.144 66.9952 101.896 60.9248 98.8746 56.9258C96.5739 53.8807 97.2272 49.3757 100.442 47.3194V47.3194C103.309 45.4861 107.118 46.3236 108.952 49.19L123.93 72.6096Z" fill="#605DE4" />
<rect id="photo-image 2" width="69" height="69" transform="matrix(-1 0 0 1 92 29)" fill="url(#pattern0)" />
<rect id="photo-image 3" width="69" height="69" transform="matrix(-1 0 0 1 177 29)" fill="url(#pattern1)" />
<path id="photo-front-right-arm" d="M80 103C80 112.5 58 86.4263 58 86.4263L95.4646 55.2751C97.6399 53.4663 100.87 53.7635 102.678 55.9388V55.9388C105.121 58.8762 103.665 63.6651 100.314 65.4994C96.6427 67.5091 92.2447 70.6709 88.5 75.5C80.3083 86.064 80 93.5 80 103Z" fill="#333333" />
<path id="photo-back-right-arm" d="M160.292 103C160.292 112.5 138.292 86.4263 138.292 86.4263L175.756 55.2751C177.932 53.4663 181.161 53.7635 182.97 55.9388V55.9388C185.413 58.8762 183.957 63.6651 180.606 65.4994C176.935 67.5091 172.537 70.6709 168.792 75.5C160.6 86.064 160.292 93.5 160.292 103Z" fill="#605DE4" />
</g>
</g>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_8_89" transform="scale(0.005)" />
</pattern>
<pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image1_8_89" transform="scale(0.005)" />
</pattern>
<clipPath id="clip0_8_89">
<rect width="180" height="180" fill="white" transform="translate(10 10)" />
</clipPath>
<image id="image0_8_89" data-name="image.png" width="200" height="200" xlink:href="" />
<image id="image1_8_89" data-name="image.png" width="200" height="200" xlink:href="" />
</defs>
</svg>
<svg width="700" height="437" viewBox="0 0 700 437" fill="none" xmlns="http://www.w3.org/2000/svg" id="rollercoaster">
<g>
<path id="camera" fill-rule="evenodd" clip-rule="evenodd" d="M378 32H382V49H385C385.552 49 386 49.4477 386 50V56C386 56.5523 385.552 57 385 57H375C374.448 57 374 56.5523 374 56V50C374 49.4477 374.448 49 375 49H378V32ZM380 55C381.105 55 382 54.1046 382 53C382 51.8954 381.105 51 380 51C378.895 51 378 51.8954 378 53C378 54.1046 378.895 55 380 55Z" fill="white" />
<g id="supports">
<rect id="supports_2" opacity="0.5" x="109" y="398" width="4" height="39" fill="white" />
<rect id="supports_3" x="170" y="185" width="10" height="252" fill="white" />
<rect id="supports_4" opacity="0.5" x="229" y="74" width="2" height="363" fill="white" />
<rect id="supports_5" opacity="0.5" x="289" y="31" width="4" height="406" fill="white" />
<rect id="supports_6" opacity="0.5" x="405" y="35" width="4" height="402" fill="white" />
<rect id="supports_7" opacity="0.5" x="349" y="21" width="2" height="416" fill="white" />
<rect id="supports_8" opacity="0.5" x="465" y="52" width="2" height="385" fill="white" />
<rect id="supports_9" x="520" y="185" width="10" height="252" fill="white" />
<rect id="supports_10" opacity="0.5" x="587" y="398" width="4" height="39" fill="white" />
</g>
<path id="exit-under" d="M106 363C106 355.268 99.732 349 92 349V349C84.268 349 78 355.268 78 363V437H106V363Z" fill="#333333" />
<path id="right-rail" d="M349.707 6.96538C445.529 6.96538 523.208 85.9458 523.208 183.373C523.208 352.347 281.885 401.965 97 401.965" stroke="white" stroke-width="13.6231" />
<path id="cover" fill-rule="evenodd" clip-rule="evenodd" d="M349 13.9725C348.911 13.9724 348.822 13.9723 348.733 13.9723V13.9731C255.205 14.2649 179.746 91.2123 179.746 185.751C179.746 266.825 236.37 318.752 310.589 350.274C249.006 365.277 180.397 371.187 118.362 371.187V393.897C191.753 393.897 275.437 385.811 347.11 363.797C419.602 387.13 504.932 395.892 579.638 395.892V373.182C516.443 373.182 446.397 366.763 383.915 350.766C459.823 319.893 518.254 268.112 518.254 185.751C518.254 91.2123 442.795 14.2649 349.267 13.9731V13.9723C349.178 13.9723 349.089 13.9724 349 13.9725ZM349 36.6825C268.192 36.8288 202.456 103.361 202.456 185.751C202.456 255.684 252.057 302.434 326.391 332.228C333.181 334.95 340.15 337.516 347.273 339.933C355.62 337.228 363.766 334.322 371.669 331.207C445.996 301.903 495.544 255.643 495.544 185.751C495.544 103.361 429.808 36.8288 349 36.6825Z" fill="#7DBDFC" />
<path id="path" d="M706.5 380.5H585C432.5 380.5 194.5 342 194.5 185C194.5 94.5 268.5 26 350 26C431.5 26 505.5 94 505.5 185C505.5 318.173 326.5 382.5 114.5 382.5C65 382.5 32.8981 382.5 -9..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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