gsap实现过山车与纪念照片动画效果代码-html代码-BFW代码库

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 .........完整代码请登录后点击上方下载按钮下载查看