gsap实现一个鞋子走动动态更换效果-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：gsap实现一个鞋子走动动态更换效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
	overflow: hidden;
}

/* Background */
.background {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--bg-dark);
	color: var(--bg-light);
}

.background .line {
	position: absolute;
	top: 0;
	height: 100vh;
	background-color: currentColor;
}

.background .line-1 {
	width: 35vw;
	left: 20vw;
	-webkit-transform: skew(-45deg);
	        transform: skew(-45deg);
}

.background .line-2 {
	width: 15vw;
	left: 60vw;
	-webkit-transform: skew(-45deg);
	        transform: skew(-45deg);
}

/* Shoebox */
.shoebox-container {
	position: absolute;
	bottom: 0;
	left: 50%;
	height: 100vh;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
}

.shoebox {
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	width: 90vw;
	height: 20vh;
	background-color: var(--box-dark);
	color: var(--box-light);
}

.shoebox::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%;
	-webkit-transform: translate(-50%, 50%);
	        transform: translate(-50%, 50%);
	display: block;
	width: 105%;
	height: 10vh;
	border-radius: 10px;
	background-color: inherit;
	
}

.shoebox::after {
	content: '';
	position: absolute;
	top: 5vh;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	display: block;
	width: 100%;
	height: 3vh;
	background-color: currentColor;
}

/* Shoe */
.shoe {
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	        transform: translate(-50%, 0);
	width: 70vw;
	height: 40vh;
	margin-top: -45vh;
}

.shoe svg {
	display: none;
	position: absolute;
	left: 50%;
	bottom: 0;
	-webkit-transform: translate(-50%);
	        transform: translate(-50%);
	width: 100%;
	height: auto;
}

/* Shoe 1 */
.scene.shoe-1 {
	--bg-light: #ffd85d;
	--bg-dark: #ffbd51;
}

.scene.shoe-1 .shoe-1 {
	display: block;
}

.scene.shoe-1 .shoebox {
	--box-light: #2982ff;
	--box-dark: #55a1ff;
}

/* Shoe 2 */
.scene.shoe-2 {
	--bg-light: #b5f4e8;
	--bg-dark: #6aceba;
}

.scene.shoe-2 .shoe-2 {
	display: block;
}

.scene.shoe-2 .shoebox {
	--box-light: #ff8751;
	--box-dark: #ffa144;
}

/* Shoe 3 */
.scene.shoe-3 {
	--bg-light: #c69ced;
	--bg-dark: #b98de7;
}

.scene.shoe-3 .shoe-3 {
	display: block;
}

.scene.shoe-3 .shoebox {
	--box-light: #00957c;
	--box-dark: #00a78c;
}
</style>

</head>
<body translate="no">
<div class="scene shoe-1">
<div class="background orange">
<div class="line line-1"></div>
<div class="line line-2"></div>
</div>
<div class="shoebox-container">
<div class="shoebox">
<div class="shoe">
<svg class="shoe-1" viewBox="0 0 650 294">
<g id="shoe1" transform="translate(0.000000, 0.004276)">
<path d="M371.188164,100.206018 L371.188164,0 C430.619099,1.79747212 462.397384,35.199478 466.523021,100.206018" id="label" fill="#18489C"></path>
<path d="M463.915808,78.9960048 C470.931463,126.44484 515.961789,163.04576 570.466082,163.04576 C584.894788,163.04576 598.65956,160.480772 611.230911,155.828564 L611.235251,155.830724 L611.545265,155.657251 C621.57301,150.081742 627.41516,151.072317 629.071715,158.628974 C629.801341,161.957283 630.132489,164.335073 630.06516,165.762344 L630.071715,165.764795 L630.071715,225.197104 L13.0852507,225.197104 L411.289554,78.9957237 L463.915808,78.9960048 Z" id="body" fill="#0F3F7D"></path>
<g id="laces" transform="translate(166.242509, 61.995724)" fill="#FFFFFF">
<path d="M23.8873257,74.2415636 L60.4717344,101.817319 C65.7344492,105.784128 66.7859156,113.2657 62.8204699,118.529441 C58.8563515,123.791421 51.3771209,124.843546 46.1151409,120.879428 C46.1143186,120.878808 46.1134964,120.878189 46.1126743,120.877569 L9.52826557,93.3018131 C4.26555079,89.3350048 3.21408444,81.8534327 7.17953007,76.589691 C11.1436485,71.327711 18.6228791,70.2755864 23.8848591,74.2397048 C23.8856814,74.2403243 23.8865036,74.2409439 23.8873257,74.2415636 Z" id="Rectangle"></path>
<path d="M74.4940601,68.7302701 L64.9505388,113.354195 C63.5669524,119.823616 57.2084327,123.952855 50.7355769,122.585429 L50.7235814,122.582894 C44.2649747,121.218478 40.1353176,114.876664 41.4997342,108.418058 C41.5017906,108.408323 41.5038592,108.398592 41.5059399,108.388862 L51.0494612,63.7649374 C52.4330476,57.2955165 58.7915673,53.1662772 65.2644231,54.533704 L65.2764186,54.5362381 C71.7350253,55.9006547 75.8646824,62.2424681 74.5002658,68.7010749 C74.4982094,68.7108092 74.4961408,68.7205409 74.4940601,68.7302701 Z" id="Rectangle"></path>
<path d="M70.6448169,57.1819973 L107.229226,84.7577531 C112.49194,88.7245615 113.543407,96.2061336 109.577961,101.469875 C105.613843,106.731855 98.1346121,107.78398 92.8726321,103.819861 C92.8718099,103.819242 92.8709877,103.818622 92.8701655,103.818003 L56.2857568,76.2422469 C51.023042,72.2754385 49.9715757,64.7938664 53.9370213,59.5301248 C57.9011398,54.2681448 65.3803703,53.2160201 70.6423503,57.1801386 C70.6431726,57.1807581 70.6439948,57.1813776 70.6448169,57.1819973 Z" id="Rectangle"></path>
<path d="M121.251551,51.6707038 L111.70803,96.2946289 C110.324444,102.76405 103.965924,106.893289 97.4930681,105.525862 L97.4810727,105.523328 C91.0224659,104.158912 86.8928088,97.8170981 88.2572255,91.3584913 C88.2592819,91.348757 88.2613505,91.3390253 88.2634312,91.3292962 L97.8069525,46.7053711 C99.1905389,40.2359502 105.549059,36.1067109 112.021914,37.4741377 L112.03391,37.4766718 C118.492517,38.8410884 122.622174,45.1829019 121.257757,51.6415087 C121.255701,51.651243 121.253632,51.6609747 121.251551,51.6707038 Z" id="Rectangle"></path>
<path d="M116.644817,39.1819973 L153.229226,66.7577531 C158.49194,70.7245615 159.543407,78.2061336 155.577961,83.4698752 C151.613843,88.7318552 144.134612,89.7839799 138.872632,85.8198614 C138.87181,85.8192419 138.870988,85.8186224 138.870166,85.8180027 L102.285757,58.2422469 C97.023042,54.2754385 95.9715757,46.7938664 99.9370213,41.5301248 C103.90114,36.2681448 111.38037,35.2160201 116.64235,39.1801386 C116.643173,39.1807581 116.643995,39.1813776 116.644817,39.1819973 Z" id="Rectangle"></path>
<path d="M165.644817,22.1819973 L202.229226,49.7577531 C207.49194,53.7245615 208.543407,61.2061336 204.577961,66.4698752 C200.613843,71.7318552 193.134612,72.7839799 187.872632,68.8198614 C187.87181,68.8192419 187.870988,68.8186224 187.870166,68.8180027 L151.285757,41.2422469 C146.023042,37.2754385 144.971576,29.7938664 148.937021,24.5301248 C152.90114,19.2681448 160.38037,18.2160201 165.64235,22.1801386 C165.643173,22.1807581 165.643995,22.1813776 165.644817,22.1819973 Z" id="Rectangle"></path>
<path d="M167.251551,33.6707038 L157.70803,78.2946289 C156.324444,84.7640498 149.965924,88.8932891 143.493068,87.5258623 L143.481073,87.5233282 C137.022466,86.1589116 132.892809,79.8170981 134.257225,73.3584913 C134.259282,73.348757 134.26135,73.3390253 134.263431,73.3292962 L143.806952,28.7053711 C145.190539,22.2359502 151.549059,18.1067109 158.021914,19.4741377 L158.03391,19.4766718 C164.492517,20.8410884 168.622174,27.1829019 167.257757,33.6415087 C167.255701,33.651243 167.253632,33.6609747 167.251551,33.6707038 Z" id="Rectangle"></path>
<path d="M216.251551,16.6707038 L206.70803,61.2946289 C205.324444,67.7640498 198.965924,71.8932891 192.493068,70.5258623 L192.481073,70.5233282 C186.022466,69.1589116 181.892809,62.8170981 183.257225,56.3584913 C183.259282,56.348757 183.26135,56.3390253 183.263431,56.3292962 L192.806952,11.7053711 C194.190539,5.23595023 200.549059,1.1067109 207.021914,2.4741377 L207.03391,2.4766718 C213.492517,3.84108841 217.622174,10.1829019 216.257757,16.6415087 C216.255701,16.651243 216.253632,16.6609747 216.251551,16.6707038 Z" id="Rectangle"></path>
</g>
<g id="bottom" transform="translate(0.000000, 219.995724)">
<rect id="base" fill="#EAEBEF" x="5.5" y="0.5" width="636" height="73" rx="8"></rect>
<rect id="line1" fill="#C0C2CF" x="0" y="24" width="520" height="7" rx="3.5"></rect>
<rect id="line2" fill="#C0C2CF" x="130" y="43" width="520" height="7" rx="3.5"></rect>
<rect id="line3" fill="#C0C2CF" x="545" y="24" width="105" height="7" rx="3.5"></rect>
<rect id="line4" fill="#C0C2CF" x="0" y="43" width="105" height="7" rx="3.5"></rect>
</g>
</g>
</svg>
<svg class="shoe-2" viewBox="0 0 650 295">
<g id="Page-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="shoe1">
<path d="M373,100.206018 L373,0 C432.430934,1.79747212 464.20922,35.199478 468.334857,100.206018" id="label" fill="#DDA7FC"></path>
<path d="M473,6.99572372 C475.39367,6.99572372 477.756647,7.12713245 480.082112,7.38312932 C481.348469,7.13201443 482.658818,7 484,7 L610,7 C621.045695,7 630,15.954305 630,27 L629.999613,165.017706 C630.06576,165.70492 630.087609,166.286466 630.06516,166.762344 L630.071715,166.764795 L630.071715,226.197104 L13.0852507,226.197104 L409.712067,80.5748546 C409.243075,77.4500238 409,74.2512604 409,70.9957237 C409,35.6494997 437.653776,6.99572372 473,6.99572372 Z" id="body" fill="#9658C4"></path>
<g id="logo" transform="translate(457.000000, 48.000000)" fill="#DDA7FC">
<path d="M62.5,0 C97.0177969,0 125,27.9822031 125,62.5 C125,97.0177969 97.0177969,125 62.5,125 C27.9822031,125 0,97.0177969 0,62.5 C0,27.9822031 27.9822031,0 62.5,0 Z M62.5,16.5 C36.8187591,16.5 16,37.0949015 16,62.5 C16,87.9050985 36.8187591,108.5 62.5,108.5 C88.1812409,108.5 109,87.9050985 109,62.5 C109,37.0949015 88.1812409,16.5 62.5,16.5 Z" id="oval"></path>
<path d="M62.5,24 C84.3152476,24 102,41.6847524 102,63.5 C102,85.3152476 84.3152476,103 62.5,103 C40.6847524,103 23,85.3152476 23,63.5 C23,41.6847524 40.6847524,24 62.5,24 L62.5,24 L50.8912413,47.5219144 L24.9332676,51.2938287 L43.7166338,69.6030856 L39.2824825,95.4561713 L62.5,83.25 L85.7175175,95.4561713 L81.2833662,69.6030856 L100.066732,51.2938287 L74.1087587,47.5219144 Z" id="star"></path>
</g>
<g id="laces" transform="translate(166.242509, 62.995724)" fill="#FFFFFF">
<path d="M23.8873257,74.2415636 L60.4717344,101.817319 C65.7344492,105.784128 66.7859156,113.2657 62.8204699,118.529441 C58.8563515,123.791421 51.3771209,124.843546 46.1151409,120.879428 C46.1143186,120.878808 46.1134964,120.878189 46.1126743,120.877569 L9.52826557,93.3018131 C4.26555079,89.3350048 3.21408444,81.8534327 7.17953007,76.589691 C11.1436485,71.327711 18.6228791,70.2755864 23.8848591,74.2397048 C23.8856814,74.2403243 23.8865036,74.2409439 23.8873257,74.2415636 Z" id="Rectangle"></path>
<path d="M74.4940601,68.7302701 L64.9505388,113.354195 C63.5669524,119.823616 57.2084327,123.952855 50.7355769,122.585429 L50.7235814,122.582894 C44.2649747,121.218478 40.1353176,114.876664 41.4997342,108.418058 C41.5017906,108.408323 41.5038592,108.398592 41.5059399,108.388862 L51.0494612,63.7649374 C52.4330476,57.2955165 58.7915673,53.1662772 65.2644231,54.533704 L65.2764186,54.5362381 C71.7350253,55.9006547 75.8646824,62.2424681 74.5002658,68.7010749 C74.4982094,68.7108092 74.4961408,68.7205409 74.4940601,68.7302701 Z" id="Rectangle"></path>
<path d="M70.6448169,57.1819973 L107.229226,84.7577531 C112.49194,88.7245615 113.543407,96.2061336 109.577961,101.469875 C105.613843,106.731855 98.1346121,107.78398 92.8726321,103.819861 C92.8718099,103.819242 92.8709877,103.818622 92.8701655,103.818003 L56.2857568,76.2422469 C51.023042,72.2754385 49.9715757,64.7938664 53.9370213,59.5301248 C57.9011398,54.2681448 65.3803703,53.2160201 70.6423503,57.1801386 C70.6431726,57.1807581 70.6439948,57.1813776 70.6448169,57.1819973 Z" id="Rectangle"></path>
<path d="M121.251551,51.6707038 L111.70803,96.2946289 C110.324444,102.76405 103.965924,106.893289 97.4930681,105.525862 L97.4810727,105.523328 C91.0224659,104.158912 86.8928088,97.8170981 88.2572255,91.3584913 C88.2592819,91.348757 88.2613505,91.3390253 88.2634312,91.3292962 L97.8069525,46.7053711 C99.1905389,40.2359502 105.549059,36.1067109 112.021914,37.4741377 L112.03391,37.4766718 C118.492517,38.8410884 122.622174,45.1829019 121.257757,.........完整代码请登录后点击上方下载按钮下载查看