div+css实现礼品从天而降打开无限循环动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现礼品从天而降打开无限循环动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
<style>
*,
*:after,
*:before {
  box-sizing: border-box;
  transform-style: preserve-3d;
  touch-action: none;
}

:root {
	--bg: hsl(140 0% 100%);
	--box: hsl(10 90% 90%);
	--ribbon: hsl(15 100% 50%);
	--bow: hsl(10 80% 50%);
  --size: 100px;
  --rotation-y: -24;
  --rotation-x: -32;
  --bounce: linear(
    0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%,
    0.1407, 0.25, 0.3908, 0.5625, 0.7654, 1,
    0.8907, 0.8125 45.45%, 0.7852, 0.7657,
    0.7539, 0.75, 0.7539, 0.7657, 0.7852,
    0.8125 63.64%, 0.8905, 1 72.73%, 0.9727,
    0.9532, 0.9414, 0.9375, 0.9414, 0.9531,
    0.9726, 1, 0.9883, 0.9844, 0.9883, 1
  );
  --drop: linear(
    0, 0.0039 25%, 0.0117 32.89%,
    0.0248 39.68%, 0.0457 46.22%,
    0.0743 52.21%, 0.1113 57.77%,
    0.1575 63%, 0.218 68.33%, 0.2901 73.39%,
    0.3745 78.23%, 0.4718 82.88%,
    0.5827 87.37%, 0.7074 91.71%,
    0.8462 95.91%, 1
  );
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: sans-serif, system-ui;
  background: var(--bg);
}

.scene {
  position: relative;
  height: var(--size);
  width: var(--size);
  transform: translate3d(0, 50px, 200vmin) rotateX(calc(var(--rotation-y, 0) * 1deg)) rotateY(calc(var(--rotation-x, 0) * 1deg)) rotateX(90deg);
}

.gift {
  width: var(--size);
  aspect-ratio: 1;
}

.inner-gift {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform: rotateX(90deg) translate3d(0, 0, calc(var(--size) * -0.5))
}

/* Cuboid boilerplate code */
.cuboid {
  width: 100%;
  height: 100%;
  position: relative;
}
.cuboid__side {
  position: absolute;
}
.cuboid__side:nth-of-type(1) {
	height: 100%;
	width: 100%;
	transform-origin: 50% 100%;
	transform: rotateX(-90deg) rotateY(0deg);
}
.cuboid__side:nth-of-type(2) {
	height: 100%;
	width: 100%;
	transform-origin: 50% 0%;
	transform: rotateX(90deg) rotateY(0deg);
}
.cuboid__side:nth-of-type(3) {
	height: 100%;
	width: 100%;
	transform-origin: 0% 50%;
	transform: rotateX(0deg) rotateY(-90deg);
}
.cuboid__side:nth-of-type(4) {
	height: 100%;
	width: 100%;
	transform-origin: 100% 50%;
	transform: rotateX(0deg) rotateY(90deg);
}
.cuboid__side:nth-of-type(5) {
	transform: rotateY(180deg);
	height: 100%;
	width: 100%;
}
.cuboid__side:nth-of-type(6) {
	height: 100%;
	width: 100%;
	opacity: 1;
	transform: translate3d(0, 0, var(--size));
}

.lid {
	position: absolute;
	width: 106%;
	height: 106%;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
}

.lid .cuboid__side {
	display: none;
}

.lid .cuboid__side:nth-of-type(1) {
	display: block;
	opacity: 1;
	height: 20%;
	width: 100%;
	transform-origin: 50% 100%;
	transform: rotateX(270deg) translateY(100%);
	bottom: 0;
}
.lid .cuboid__side:nth-of-type(2) {
	display: block;
	opacity: 1;
	height: 20%;
	width: 100%;
	transform-origin: 50% 0%;
	transform: rotateX(90deg) translateY(-100%);
	top: 0;
}
.lid .cuboid__side:nth-of-type(3) {
	display: block;
	opacity: 1;
	height: 100%;
	width: 20%;
	transform-origin: 0% 50%;
	transform: rotateY(270deg) translateX(-100%);
	top: 0;
	left: 0;
}
.lid .cuboid__side:nth-of-type(4) {
	display: block;
	opacity: 1;
	height: 100%;
	width: 20%;
	transform-origin: 100% 50%;
	transform: rotateY(90deg) translateX(100%);
	top: 0;
	right: 0;
}
.lid .cuboid__side:nth-of-type(5) {
	display: block;
	transform: rotateY(0deg);
	opacity: 1;
}


.cuboid__side:nth-of-type(1) { --b: 0.94; }
.cuboid__side:nth-of-type(2) { --b: 1.1; }
.cuboid__side:nth-of-type(3) { --b: 0.98; }
.cuboid__side:nth-of-type(4) { --b: 1.05; }
.cuboid__side:nth-of-type(5) { --b: 1; }
.cuboid__side:not(:nth-of-type(6))::before,
.cuboid__side:not(:nth-of-type(6))::after {
	filter: brightness(var(--b, 1));
.........完整代码请登录后点击上方下载按钮下载查看