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