tkop实现一款切蛋糕立体交互可爱蛋糕效果代码-html代码-BFW代码库

tkop实现一款切蛋糕立体交互可爱蛋糕效果代码

代码语言：html

所属分类：动画

代码描述：tkop实现一款切蛋糕立体交互可爱蛋糕效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tkop.js" data-tor-init="postpone"></script>
  
<style>
html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 10000px;
	background-color: #fffded;
	font-size: clamp(1rem, 3vw, 1.5rem);
	width: 100%;
	height: 100%;
}

.cake {
	transform-style: preserve-3d;
	transform-origin: top;
	position: relative;
}

.cake::after {
	content: url("//repo.bfw.wiki/bfwrepo/svg/cake/smile.66ec8f86.svg");
	position: absolute;
	width: 6em;
	top: 0;
	left: 0;
	display: block;
	transform: translate3d(-1em, 7em, -3em) rotateX(-90deg);
	transform-origin: center;
	pointer-events: none;
}

.piece {
	width: 4em;
	height: auto;
	position: relative;
	transform-style: preserve-3d;
	transform-origin: top;
	cursor: pointer;
}

.piece:not(:first-child) {
	position: absolute;
	top: 0;
	left: 0;
}

.top {
	position: relative;
	transform: scale(1.05);
	transform-origin: top;
	transform-style: preserve-3d;
}

.shadow {
	position: absolute;
	pointer-events: none;
	opacity: 0.3;
	filter: blur(2.5em);
}

.front {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	transform: rotateX(-90deg);
	transform-origin: top;
	transform-style: preserve-3d;
}

.front img:first-child {
	position: absolute;
	transform: translateZ(3px) scaleX(1.05);
	width: 100%;
}

.left,
.right {
	position: absolute;
	top: 100%;
	width: 7.7em;
}

.left {
	left: 0;
	transform: rotateZ(-75deg) rotateX(-90deg);
	transform-origin: top left;
}

.right {
	right: 0;
	transform: rotateZ(75deg) rotateX(-90deg);
	transform-origin: top right;
}

.strawberry {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1.5em;
	margin: auto;
	right: 0;
	transform-origin: bottom;
	transform-style: pre.........完整代码请登录后点击上方下载按钮下载查看