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

gsap实现一个鞋子走动动态更换效果

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