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: preserve-3d;
	transform: translate3d(0px, -1.8em, 0px) rotateX(-90deg);
}

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

.strawberry img:nth-child(1) {
	transform: rotateY(0deg);
}
.strawberry img:nth-child(2) {
	transform: rotateY(45deg);
}
.strawberry img:nth-child(3) {
	transform: rotateY(90deg);
}
.strawberry img:nth-child(4) {
	transform: rotateY(135deg);
}
.strawberry img:nth-child(5) {
	transform: rotateY(180deg);
}
.strawberry img:nth-child(6) {
	transform: rotateY(225deg);
}
.strawberry img:nth-child(7) {
	transform: rotateY(270deg);
}
.strawberry img:nth-child(8) {
	transform: rotateY(315deg);
}
.strawberry img:nth-child(9) {
	transform: rotateY(360deg);
}
.strawberry img:nth-child(10) {
	transform: rotateY(405deg);
}
.strawberry img:nth-child(11) {
	transform: rotateY(450deg);
}
.strawberry img:nth-child(12) {
	transform: rotateY(495deg);
}
</style>

  
  
</head>

<body translate="no">
  <div
	class="wrapper"
	data-tor-group="
    .piece =>
      rotateZ(/+30/deg) translateZ(-100vh)
      animate:[translateZ(0em <5s, spring(30, 15), delay: /random(50, 500)/ms>)]
      hover:[translateZ(2em) @keep-shadow/+1/]
      click:translateZ(100vh)
    ;
    .shadow => translateZ(-10em) @keep-shadow/+1/:translateZ(-12em);
  &qu.........完整代码请登录后点击上方下载按钮下载查看