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