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.895.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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