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));
}


/* Complicated timeline? */
/**
 * Complicated timeline?
 * 1. Drop Gift for the initial drop
 * 2. Pop the lid
 * 3. Fold down the sides
 * 4. Slide the bigger
 * 5. Up goes the bigger, up comes the shadow and the inner scales up
 * 6. Rinse and repeat?
 * 
 * Once you've dialled them in we need to set all the keyframes to be the same duration/delay
 * This is so they loop perferctly each time
 * 
 * */

 /* Animation timelines */
/* 1. The initial drop, This isn't part of the 9s duration loop */
.gift {
	-webkit-animation: drop 1s both var(--bounce);
	        animation: drop 1s both var(--bounce);
}
.tumble-drop {
	width: 100%;
  height: 100%;
  position: absolute;
  transform-origin: 50% 100%;
  transform: rotateX(-90deg) translate3d(0, 0, calc(var(--size) * -0.5));
  -webkit-animation: drop-tumbler 1s steps(1, end);
          animation: drop-tumbler 1s steps(1, end);
}
.drop-shadow {
	position: absolute;
	width: 85%;
	height: 85%;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	transform: translate3d(0, 0, -80vh);
	-webkit-animation: drop-shadow 1s backwards var(--bounce);
	        animation: drop-shadow 1s backwards var(--bounce);
}
@-webkit-keyframes drop {
	0% {
		transform: translate3d(0, 0, 80vh);
	}
}
@keyframes drop {
	0% {
		transform: translate3d(0, 0, 80vh);
	}
}
@-webkit-keyframes drop-shadow {
	0% {
		opacity: 0;
		scale: 0;
		transform: translate3d(0, 0, -80vh);
	}
	to {
		scale: 1;
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
@keyframes drop-shadow {
	0% {
		opacity: 0;
		scale: 0;
		transform: translate3d(0, 0, -80vh);
	}
	to {
		scale: 1;
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}
@-webkit-keyframes drop-tumbler {
	0% {
		opacity: 0;
	}
}
@keyframes drop-tumbler {
	0% {
		opacity: 0;
	}
}
/**
 * 2. Popping the lid
 * - Make one element go up and down
 * - The lid element translates out of the way and flips the lid
 * */
:root {
 	--duration: 5s;
 	--delay: 2s;
}
.gift .lid {
	-webkit-animation: pop var(--duration) var(--delay) both infinite;
	        animation: pop var(--duration) var(--delay) both infinite;
}
.gift .lid .cuboid {
	transform-origin: 0 50%;
	-webkit-animation: slide var(--duration) var(--delay) both infinite;
	        animation: slide var(--duration) var(--delay) both infinite;
}

.gift .lid .bobble__segment {
	-webkit-animation: squidge var(--duration) var(--delay) both infinite;
	        animation: squidge var(--duration) var(--delay) both infinite;
}

@-webkit-keyframes squidge {
	0%, 8% { transform: rotateX(90deg) rotateY(calc(((360 / var(--segments)) * var(--index)) * 1deg)) scaleY(1); }
	12%, 100% { transform: rotateX(90deg) rotateY(calc(((360 / var(--segments)) * var(--index)) * 1deg)) scaleY(0);  }
}

@keyframes squidge {
	0%, 8% { transform: rotateX(90deg) rotateY(calc(((360 / var(--segments)) * var(--index)) * 1deg)) scaleY(1); }
	12%, 100% { transform: rotateX(90deg) rotateY(calc(((360 / var(--segments)) * var(--index)) * 1deg)) scaleY(0);  }
}

@-webkit-keyframes pop {
	0% { transform: translate3d(0, 0, 0); }
	4% { transform: translate3d(0, 0, calc(var(--size) * 0.5)); }
	12%, 100% { transform: translate3d(0, 0, calc(var(--size) * -1)); }
}

@keyframes pop {
	0% { transform: translate3d(0, 0, 0); }
	4% { transform: translate3d(0, 0, calc(var(--size) * 0.5)); }
	12%, 100% { transform: translate3d(0, 0, calc(var(--size) * -1)); }
}
@-webkit-keyframes slide {
	0%, 3.5% {
		translate: 0 0;
		transform: rotateY(0deg);
	}
	12%, 100% {
		transform: rotateY(-180deg);
		translate: -100% 0;
	}
}
@keyframes slide {
	0%, 3.5% {
		translate: 0 0;
		transform: rotateY(0deg);
	}
	12%, 100% {
		transform: rotateY(-180deg);
		translate: -100% 0;
	}
}
/**
 * 3. Unwrap
 * - Drop the sides to reveal the little inner gift
 * - -180 180
 * */
.gift > .cuboid > .cuboid__side:nth-of-type(1) { --de.........完整代码请登录后点击上方下载按钮下载查看