div+css实现礼品从天而降打开无限循环动画效果代码
代码语言：html
所属分类：动画
代码描述：div+css实现礼品从天而降打开无限循环动画效果代码
代码标签： 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) { --dest-x: -180deg; --origin-x: -90deg; }
.gift > .cuboid > .cuboid__side:nth-of-type(2) { --dest-x: 180deg; --origin-x: 90deg; }
.gift > .cuboid > .cuboid__side:nth-of-type(3) { --dest-y: -180deg; --origin-y: -90deg; }
.gift > .cuboid > .cuboid__side:nth-of-type(4) { --dest-y: 180deg; --origin-y: 90deg; }
.gift > .cuboid > .cuboid__side:nth-of-type(1),
.gift > .cuboid > .cuboid__side:nth-of-type(2),
.gift > .cuboid > .cuboid__side:nth-of-type(3),
.gift > .cuboid > .cuboid__side:nth-of-type(4) {
-webkit-animation: unwrap var(--duration) var(--delay) both infinite;
animation: unwrap var(--duration) var(--delay) both infinite;
}
@-webkit-keyframes unwrap {
0%, 25% {
transform: rotateX(var(--origin-x, 0deg)) rotateY(var(--origin-y, 0deg));
}
30%, 100% {
transform: rotateX(var(--dest-x, 0deg)) rotateY(var(--dest-y, 0deg));
}
}
@keyframes unwrap {
0%, 25% {
transform: rotateX(var(--origin-x, 0deg)) rotateY(var(--origin-y, 0deg));
}
30%, 100% {
transform: rotateX(var(--dest-x, 0deg)) rotateY(var(--dest-y, 0deg));
}
}
/**
* 4. After unwrapping
* - Slide the gift out of the way
* */
.gift-slider {
position: absolute;
width: 100%;
height: 100%;
-webkit-animation: slide-away var(--duration) var(--delay) both infinite;
animation: slide-away var(--duration) var(--delay) both infinite;
}
@-webkit-keyframes slide-away {
0%, 40% { translate: 0 0; }
50%, 100% { translate: -50vw 0; }
}
@keyframes slide-away {
0%, 40% { translate: 0 0; }
50%, 100% { translate: -50vw 0; }
}
.gift::after {
/* content: "";*/
position: absolute;
left: 650%;
width: 100%;
height: 200vmax;
background: hsl(0 0% 96%);
-webkit-mask: linear-gradient(0deg, transparent, white 10% 90%, transparent),
linear-gradient(90deg, white, transparent);
mask: linear-gradient(0deg, transparent, white 10% 90%, transparent),
linear-gradient(90deg, white, transparent);
-webkit-mask-composite: source-in, xor;
mask-composite: intersect;
top: 50%;
transform-origin: 0 50%;
transform: translate(calc(var(--size) * -0.35), -50%) rotateY(90deg);
-webkit-animation: fade-in var(--duration) var(--delay) both infinite;
animation: fade-in var(--duration) var(--delay) both infinite;
}
@-webkit-keyframes fade-in {
0%, 40%, 75%, 100% { opacity: 0; }
50%, 60% { opacity: 1; }
}
@keyframes fade-in {
0%, 40%, 75%, 100% { opacity: 0; }
50%, 60% { opacity: 1; }
}
.tumbler {
position: absolute;
height: 100%;
width: 100%;
translate: 0 0;
}
.tumble-gift {
width: 100%;
height: 100%;
position: absolute;
transform-origin: 50% 100%;
transform: scale3d(0.5, 0.5, 0.5);
}
.tumble {
height: 100%;
width: 100%;
}
.tumble--one, .tumble--five {
transform-origin: 100% 100%;
}
.tumble--two, .tumble--six {
transform-origin: 100% 0%;
}
.tumble--three, .tumble--seven {
transform-origin: 0% 0%;
}
.tumble--four, .tumble--eight {
transform-origin: 0% 100%;
}
/**
* 5. The Tumble before the drop
* This could be done with a changing transform-origin. Nested
* elements will do the trick though and be easier to manage.
* */
.tumbler {
-webkit-animation: offset-tumble var(--duration) var(--delay) both infinite;
animation: offset-tumble var(--duration) var(--delay) both infinite;
}
@-webkit-keyframes offset-tumble {
0%, 40% { translate: 0 0; }
50%, 100% { translate: -800% 0; }
}
@keyframes offset-tumble {
0%, 40% { translate: 0 0; }
50%, 100% { translate: -800% 0; }
}
.tumble {
-webkit-animation: tumble-one var(--duration) var(--delay) both infinite;
animation: tumble-one var(--duration) var(--delay) both infinite;
}
.tumble--two {
-webkit-animation-name: tumble-two;
animation-name: tumble-two;
}
.tumble--three {
-webkit-animation-name: tumble-three;
animation-name: tumble-three;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0