svg实现就职贺卡点开悬浮动画效果代码
代码语言：html
所属分类：悬停
代码描述：svg实现就职贺卡点开悬浮动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");
* {
box-sizing: border-box;
}
:root {
--bg: #2a3d51;
--body: #cddffe;
--stripes: #012665;
--flame-1: #eb9947;
--flame-2: #fae39e;
--paper: #bad9f7;
--paper-2: #e8f2fc;
--paper-3: #eb6347;
--card: #f5f9ff;
--insert: #f1f2f4;
--bottom-frosting: #f5b1a3;
--mid-frosting: #a3f5f5;
--top-frosting: #ccf5a3;
--balloon-3: 10;
--balloon-2: 180;
--balloon-1: 90;
--size: 35vmin;
--height: var(--size);
--width: calc(var(--size) * 1.4);
--read: 0;
--transition: 0.2s;
}
body {
background: var(--bg);
min-height: 100vh;
perspective: 1000px;
transform-style: preserve-3d;
overflow: hidden;
}
input {
opacity: 0;
position: fixed;
right: 100%;
}
label {
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 2;
transform-style: preserve-3d;
transform: translate3d(0, 0, 100px);
}
:checked ~ .scene {
--read: 1;
}
:checked ~ .scene .hide-back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
:checked ~ .scene .cake__candle {
transform: translate(0, 0);
}
.stamp {
height: 8vmin;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 1px);
filter: saturate(0.5);
}
.barcode {
height: 6vmin;
width: 8vmin;
position: absolute;
bottom: 2vmin;
right: 2vmin;
transform: translate3d(0, 0, 1px);
--l: #808080;
background: repeating-linear-gradient(90deg, var(--l) 0 1%, transparent 1% 2%, var(--l) 2% 4%, transparent 4% 5%, var(--l) 5% 10%);
}
.scene {
display: flex;
align-items: center;
justify-content: center;
transform: rotateY(calc(var(--x, 0) * 1deg)) rotateX(calc(var(--y, 0) * 1deg));
height: 100vh;
width: 100vw;
transform-style: preserve-3d;
}
.card {
height: calc(var(--height));
position: relative;
width: var(--width);
transform-style: preserve-3d;
transform: translate(0, calc(var(--read, 0) * 25%)) rotateX(calc(var(--read, 0) * 90deg));
transition: transform var(--transition);
}
.card__confetti {
--size: calc(var(--s) * 1vmin);
height: var(--size);
width: var(--size);
position: absolute;
top: 0%;
left: 50%;
transition: transform calc(var(--read) * var(--transition)) calc(var(--read) * var(--transition)), opacity calc(var(--read) * var(--transition)) calc((var(--read) * var(--transition)) * 2);
transform: scale(var(--read)) translate(-50%, 10%) rotate(calc(var(--r) * 1deg)) rotateX(calc(var(--a) * 1deg)) skew(calc(var(--sk) * 1deg)) translate(0, calc(var(--height) * (var(--read, 0) * 1.5)));
opacity: calc(1 - var(--read));
}
.card__confetti:after {
background: hsl(var(--hue), 80%, 80%);
content: '';
position: absolute;
height: 100%;
width: 100%;
transition: transform calc(var(--read) * var(--transition)) calc(var(--read) * var(--transition));
transform: rotateX(calc((var(--rx) * var(--read)) * 1deg)) rotateY(calc((var(--ry) * var(--read)) * 1deg));
}
.card__content {
transform-style: preserve-3d;
height: 100%;
width: 100%;
}
.card__content--bottom:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: var(--insert);
-webkit-clip-path: polygon(0 0, 15% 0, 15% 30%, 85% 30%, 85% 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 15% 0, 15% 30%, 85% 30%, 85% 0, 100% 0, 100% 100%, 0 100%);
}
.card__content--top:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: var(--insert);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 70%, 78% 70%, 78% 46%, 72.4% 46%, 72.4% 26.8%, 27.6% 26.8%, 27.6% 46%, 22% 46%, 22% 70%, 15% 70%, 15% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 70%, 78% 70%, 78% 46%, 72.4% 46%, 72.4% 26.8%, 27.6% 26.8%, 27.6% 46%, 22% 46%, 22% 70%, 15% 70%, 15% 100%, 0 100%);
}
.card__message {
position: absolute;
padding: 1rem;
font-family: sans-serif;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
}
.card__part {
height: var(--h, 100%);
width: var(--w, 100%);
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0);
transform-style: preserve-3d;
}
.card__inner {
--h: 96%;
--w: 95%;
transform: translate3d(-50%, 0, calc(var(--height) * 0));
}
.card__sleeve {
height: 100%;
width: 100%;
}
.message {
font-family: "Fredoka One", cursive;
color: #1a1a1a;
display: flex;
flex-direction: column;
position: absolute;
top: 50%;
left: 20%;
transform: translate3d(0, -20%, 0);
margin: 0;
font-size: 4.5vmin;
}
.card__message {
font-family: "Fredoka One", cursive;
color: #1a1a1a;
font-size: 4vmin;
white-space: nowrap;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 0);
}
.flip {
transform-style: preserve-3d;
}
.flip__piece {
height: 100%;
position: absolute;
width: 100%;
transform-origin: 50% 0;
transform-style: preserve-3d;
transition: transform var(--transition);
}
.flip__piece--front {
transform: rotateX(calc(var(--front) * 1deg));
}
.flip__piece--back {
transform: rotateX(calc(var(--rear) * 1deg));
}
.card__inner {
--rear: calc(-1.75 + (var(--read, 0) * 2));
--front: calc(1.75 + (var(--read, 0) * 88));
}
.card__outer {
--rear: calc(-2 + (var(--read, 0) * 2));
--front: calc(2 + (var(--read, 0) * 88));
}
.card__content-container {
transform-style: preserve-3d;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
.card__content-container--inner-top {
transform: rotate(180deg) translate3d(0, 0, 0);
}
.card__content-container--inner-bottom {
transform: translate3d(0, 0, 0);
}
.cover__content {
height: 100%;
width: 100%;
background: var(--card);
position: absolute;
font-size: 2vmin;
transform-style: preserve-3d;
}
.cover__content--front,
.cover__content--rear {
transform: translate3d(0, 0, 1px);
}
.front-cover__front,
.rear-cover__front {
background: var(--card);
}
.front-cover__front:after,
.rear-cover__front:after {
content: '';
position: absolute;
top: 0%;
left: 50%;
transform: translate3d(-50%, 0, 0px);
background: var(--paper-3);
height: 95%;
width: 95%;
}
.rear-cover__front:after {
transform: translate(-50%, 0, 2px);
}
.cake__section {
position: absolute;
transform-style: preserve-3d;
transition: var(--transition);
}
.cake__section--top {
height: 80%;
width: 80%;
left: 50%;
bottom: 0;
}
.cake__section--top-top {
transform: translate(-50%, 0) rotateX(calc(var(--read, 0) * 90deg)) translate3d(0, -100%, calc(var(--read, 0) * 0px)) rotateX(calc(var(--read, 0) * -90deg));
transform-origin: 50% 100%;
background: var(--paper);
}
.cake__section--top-front {
background: var(--paper-2);
transform-origin: 50% 100%;
transform: translate(-50%, -100%) rotateX(calc(var(--read, 0) * 90deg));
}
.cake__section--mid {
height: 80%;
width: 80%;
left: 50%;
}
.cake__section--mid-front {
bottom: 0;
transform-origin: 50% 0;
transform: translate3d(-50%, 0, 0) rotateX(calc((180 - (var(--read, 0) * -90)) * 1deg));
background: var(--paper-2);
}
.cake__section--mid-top {
background: transparent;
bottom: 0;
transform-origin: 50% 100%;
transform: translate(-50%, 0) rotateX(calc(var(--read, 0) * 90deg)) translate3d(0, -100%, calc(var(--read, 0) * 0px)) rotateX(calc(var(--read, 0) * -90deg));
}
.cake__section--mid-top:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
-webkit-clip-path: polygon(0 0, 10% 0, 10% 80%, 90% 80%, 90% 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 10% 0, 10% 80%, 90% 80%, 90% 0, 100% 0, 100% 100%, 0 100%);
transform: rotate(180deg);
background: var(--paper);
}
.cake__section--bottom {
height: 30%;
width: 70%;
left: 50%;
transition: var(--transition);
}
.cake__section--bottom-top {
background: transparent;
transform-origin: 50% 100%;
bottom: 0;
transform: translate(-50%, -100%) rotateX(calc(var(--read, 0) * -90deg));
}
.cake__section--bottom-top:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
-webkit-clip-path: polygon(0 0, 10% 0, 10% 80%, 90% 80%, 90% 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 10% 0, 10% 80%, 90% 80%, 90% 0, 100% 0, 100% 100%, 0 100%);
transform: rotate(180deg);
background: var(--paper);
}
.cake__section--bottom-front {
background: var(--paper-2);
top: 0;
transform-origin: 50% 0;
transform: translate(-50%, 100%) rotateX(calc(var(--read, 0) * 90deg));
}
.section {
height: 100%;
width: 100%;
}
.section__piece {
position: absolute;
height: 100%;
width: 100%;
transform-style: preserve-3d;
}
.section__piece--back {
transform: rotateY(180deg);
}
.balloon {
overflow: visible !important;
height: 6vmin;
position: absolute;
left: calc(var(--x, 0) * 1%);
top: calc(var(--y, 0) * 1%);
-webkit-animation: float calc(var(--s, 0) * 1s) calc(var(--d, 0) * 1s) infinite;
animation: float calc(var(--s, 0) * 1s) calc(var(--d, 0) * 1s) infinite;
}
.balloon__body {
fill: var(--fill, 0);
}
.balloon__glare {
fill: rgba(255,255,255,0.75);
}
.balloon__shadow {
fill: var(--fill, 0);
}
.balloon__string {
stroke: #b3914d;
}
.balloon:nth-of-type(1) {
--fill: rgba(230,230,230,0.5);
--x: 58;
--y: 28;
}
.balloon:nth-of-type(2) {
--fill: rgba(187,27,48,0.5);
--x: 68;
--y: 20;
}
.balloon:nth-of-type(3) {
--fill: rgba(1,38,101,0.5);
--x: 65;
--y: 40;
}
.cake {
overflow: visible !important;
width: 100%;
height: 100%;
transform: translate3d(0, 0, 1px);
}
.cake__frosting {
fill: var(--frosting);
}
.cake__eyes {
transform-origin: 50% 24px;
-webkit-animation: blink 5s infinite;
animation: blink 5s infinite;
}
.cake__body {
fill: var(--body);
}
.cake--bottom {
--frosting: #012665;
}
.cake--mid {
--frosting: #fff;
}
.cake--top {
--frosting: #bb1b30;
}
.cake--bottom,
.cake--mid {
transform: translate3d(0, 0, -1px) rotate(180deg);
}
.cake--mid .cake__sprinkles,
.cake--top .cake__sprinkles {
transform: translate(0, -8px);
}
.cake__candle {
transform: translate(0, 12px);
transition: var(--transition);
}
.cake__sprinkle:nth-of-type(1n) {
fill: #bb1b2e;
}
.cake__sprinkle:nth-of-type(2n) {
fill: #012665;
}
.cake__sprinkle:nth-of-type(3n) {
fill: #fff;
}
.candle__body {
fill: var(--body);
}
.candle__stripes {
fill: var(--stripes);
}
.candle__flame {
-webkit-animation: scribble 0.5s infinite;
animation: scribble 0.5s infinite;
}
.candle__flame-outer {
fill: var(--flame-1);
}
.candle__flame-inner {
fill: var(--flame-2);
}
@-webkit-keyframes blink {
0%, 47%, 49%, 51%, 100% {
transform: scaleY(1);
}
48%, 50% {
transform: scaleY(0.1);
}
}
@keyframes blink {
0%, 47%, 49%, 51%, 100% {
transform: scaleY(1);
}
48%, 50% {
transform: scaleY(0.1);
}
}
@-webkit-keyframes float {
0%, 100% {
transform: translate3d(0, 0, calc(var(--s) * 1px));
}
50% {
transform: translate3d(0, -25%, calc(var(--s) * 1px));
}
}
@keyframes float {
0%, 100% {
transform: translate3d(0, 0, calc(var(--s) * 1px));
}
50% {
transform: translate3d(0, -25%, calc(var(--s) * 1px));
}
}
@-webkit-keyframes scribble {
0% {
filter: url("#scribble--0");
}
25% {
filter: url("#scribble--1");
}
50% {
filter: url("#scribble--2");
}
75% {
filter: url("#scribble--3");
}
100% {
filter: url("#scribble--4");
}
}
@keyframes scribble {
0% {
filter: url("#scribble--0");
}
25% {
filter: url("#scribble--1");
}
50% {
filter: url("#scribble--2");
}
75% {
filter: url("#scribble--3");
}
100% {
filter: url("#scribble--4");
}
}
</style>
</head>
<body >
<input id="read" type="checkbox"/>
<label for="read"></label>
<div class="scene">
<div class="card">
<div class="card__confetti" style="--rx: 13.714579122807145; --ry: 291.5944644179328; --a: 75.63716843585458; --hue: 337.864604780776; --r: 89.84635977218147; --s:0.6511325735193108; --sk: 11.50695873267611;"></div>
<div class="card__confetti" style="--rx: 49.59544234172058; --ry: 343.1078023372352; --a: 51.5424791875885; --hue: 208.32262336007636; --r: -82.88665188759178; --s:4.323529161948102; --sk: 14.845729854666821;"></div>
<div class="card__confetti" style="--rx: 118.61823527329575; --ry: 159.3467161722453; --a: 57.856691546477975; --hue: 123.84954445887584; --r: -31.061338988460314; --s:0.24792196099396757; --sk: 2.5986516301083062;"></div>
<div class="card__confetti" style="--rx: 226.49197557768952; --ry: 68.64041903253303; --a: 19.92338056108407; --hue: 143.92465055254698; --r: 20.75821130694105; --s:1.742724559510258; --sk: 7.481464403564604;"></div>
<div class="card__confetti" style="--rx: 185.5034860518562; --ry: 78.33612100350666; --a: 56.193353570611315; --hue: 7.179422848794568; --r: -25.430179146207593; --s:1.7493552141135504; --sk: 0.33822780534346286;"></div>
<div class="card__confetti" style="--rx: 136.60774774741563; --ry: 99.1259538284598; --a: 84.92507642638013; --hue: 8.794413788224702; --r: 33.10119180831266; --s:0.4258505921358646; --sk: 4.395874762932639;"></div>
<div class="card__confetti" style="--rx: 43.37235835047446; --ry: 31.035097624559434; --a: 5.8665607669939; --hue: 252.82307805845772; --r: 88.50880699949133; --s:2.638217679301299; --sk: 8.450191233827745;"></div>
<div class="card__confetti" style="--rx: 70.69014857456006; --ry: 253.77246012676292; --a: 81.51776485786698; --hue: 348.8810922513548; --r: -89.76734851685737; --s:0.1493061616556146; --sk: 6.589496914829978;"></div>
<div class="card__confetti" style="--rx: 167.86800998746403; --ry: 319.79303248084886; --a: 32.69508488031592; --hue: 353.8761634708303; --r: -46.83223623604598; --s:4.119795607832976; --sk: 6.003591151201939;"></div>
<div class="card__confetti" style="--rx: 285.2619981079229; --ry: 1.7684781807106198; --a: 21.720903706419783; --hue: 229.1344479152082; --r: 55.04090992253563; --s:4.729115140127532; --sk: 2.538843416620531;"></div>
<div class="card__confetti" style="--rx: 253.23320673292022; --ry: 206.07708093037442; --a: 68.56118806866088; --hue: 13.255406021507241; --r: 43.62987301822608; --s:2.4980835815090896; --sk: 1.6618295450047382;"></div>
<div class="card__confetti" style="--rx: 284.1931612480833; --ry: 184.09933230822332; --a: 72.22166978842083; --hue: 192.38304141171284; --r: -87.46685154695957; --s:4.564162127164138; --sk: 1.341583683143397;"></div>
<div class="card__confetti" style="--rx: 140.94744925440594; --ry: 226.29161607323152; --a: 12.26060162528923; --hue: 250.8851704608917; --r: -84.68876286367413; --s:0.3448406706069185; --sk: 0.699651528801053;"></div>
<div class="card__confetti" style="--rx: 41.614065969791426; --ry: 180.9764779435616; --a: 42.58908988948627; --hue: 54.177140438638325; --r: 71.10441102269243; --s:4.551989535477839; --sk: 10.224779982201548;"></div>
<div class="card__confetti" style="--rx: 224.41549108035102; --ry: 321.94906602883646; --a: 25.324872503309837; --hue: 87.45935039726862; --r: -86.53039208077413; --s:2.246630363746015; --sk: 13.651628134163353;"></div>
<div class="card__confetti" style="--rx: 268.953483008783; --ry: 108.70702866900326; --a: 32.050559457097165; --hue: 82.05680635223673; --r: 8.939951322489236; --s:3.5800331869131274; --sk: 0.722384925678683;"></div>
<div class="card__confetti" style="--rx: 63.743515841335416; --ry: 94.70886053070876; --a: 63.54897581649691; --hue: 224.18981881235723; --r: -22.898330439147657; --s:1.4030513421396562; --sk: 13.113465979806564;"></div>
<div class="card__confetti" style="--rx: 332.409727272283; --ry: 0.4557736816973712; --a: 74.99964120151928; --hue: 51.119468142979144; --r: -55.998929031629054; --s:3.6409250982542996; --sk: 19.286800594400837;"></div>
<div class="card__confetti" style="--rx: 63.98610790928359; --ry: 324.6979769244691; --a: 2.5423564729567194; --hue: 356.81860445935416; --r: -41.59048868968077; --s:0.703081252529103; --sk: 13.353309163725879;"></div>
<div class="card__confetti" style="--rx: 196.84268523374394; --ry: 197.2549585984273; --a: 61.3684772825422; --hue: 32.487997493215744; --r: 63.254607650427005; --s:3.1123497004441445; --sk: 13.815765292206518;"></div>
<div class="card__confetti" style="--rx: 349.97582707368315; --ry: 358.81127567372846; --a: 40.76007614045872; --hue: 144.36948892587313; --r: 11.393284060395743; --s:1.6778705349664924; --sk: 14.808279204576458;"></div>
<div class="card__confetti" style="--rx: 74.27430991606074; --ry: 350.71863148620685; --a: 3.736915587341918; --hue: 355.89094410612887; --r: 32.74025233676679; --s:3.148758976502841; --sk: 8.360496504633144;"></div>
<div class="card__confetti" style="--rx: 321.0775929989836; --ry: 282.15827240809284; --a: 25.186097351758047; --hue: 269.84855994514504; --r: 64.78120870501704; --s:2.223148388047841; --sk: 9.748301070292648;"></div>
<div class="card__confetti" style="--rx: 64.7461282477422; --ry: 287.10526745817424; --a: 11.643241481668738; --hue: 121.33574291114829; --r: 25.961612328412713; --s:4.79444505615517; --sk: 13.829128449686522;"></div>
<div class="card__confetti" style="--rx: 127.21932438136972; --ry: 136.5642874999154; --a: 78.38042267785607; --hue: 277.21735152041083; --r: 85.445413487482; --s:3.8351470068328783; --sk: 0.1659947612734758;"></div>
<div class="card__confetti" style="--rx: 198.06762992283268; --ry: 223.36243898941512; --a: 76.58862014558167; --hue: 124.29593136189565; --r: -8.590236846488821; --s:0.8559966098316374; --sk: 7.698031867504955;"></div>
<div class="card__confetti" style="--rx: 91.44704577851974; --ry: 58.95838911582595; --a: 19.00969903321916; --hue: 281.1008195760076; --r: -88.92756830937357; --s:2.268569884512033; --sk: 19.333082463943366;"></div>
<div class="card__confetti" style="--rx: 30.178052323451993; --ry: 334.19805312194245; --a: 80.08577341264568; --hue: 305.9436110976045; --r: -86.18570036567229; --s:4.834554296439746; --sk: 6.330849266499019;"></div>
<div class="card__confetti" style="--rx: 335.0041415991636; --ry: 4.573391079784779; --a: 79.24353769544223; --hue: 246.56900750428557; --r: -58.888491517738125; --s:0.8298919561281326; --sk: 19.283757066289887;"></div>
<div class="card__confetti" style="--rx: 45.46112486770088; --ry: 66.18005167362344; --a: 58.69704003894602; --hue: 31.452467979773225; --r: -51.057038846179424; --s:0.8943343464229059; --sk: 6.48361511837789;"></div>
<div class="card__confetti" style="--rx: 50.397478414933936; --ry: 116.57189969451862; --a: 70.49501601343813; --hue: 285.7192604930677; --r: 5.846712400959589; --s:0.6897111986215843; --sk: 8.749992297934428;"></div>
<div class="card__confetti" style="--rx: 176.00424643159965; --ry: 92.98172874542387; --a: 88.23264712601335; --hue: 94.17493244839962; --r: -79.56142800249197; --s:3.028802180667154; --sk: 5.173053368809186;"></div>
<div class="card__confetti" style="--rx: 93.18108302793155; --ry: 250.50457606193513; --a: 29.65225669566074; --hue: 102.11211275496086; --r: -60.92942026903013; --s:0.6207242561817994; --sk: 17.78265913022984;"></div>
<div class="card__confetti" style="--rx: 286.20771867871224; --ry: 178.47939518395998; --a: 18.57923812868724; --hue: 203.05351579684535; --r: -6.217600254208733; --s:4.266320609340603; --sk: 1.4830273365251667;"></div>
<div class="card__confetti" style="--rx: 269.2166863205559; --ry: 338.0918612501392; --a: 70.82710352636228; --hue: 271.7692267026953; --r: 17.75690105872988; --s:1.9764538044085544; --sk: 13.129690480416487;"></div>
<div class="card__confetti" style="--rx: 75.53421933558388; --ry: 116.08668770805633; --a: 81.80944090633353; --hue: 86.14661103906896; --r: -20.49592390259508; --s:0.6234492371792011; --sk: 6.989415029704733;"></div>
<div class="card__confetti" style="--rx: 85.02673302382743; --ry: 115.4372212253688; --a: 47.18743701990119; --hue: 166.24806260301028; --r: -33.04166874790524; --s:4.644328232273981; --sk: 0.18451868175275443;"></div>
<div class="card__confetti" style="--rx: 352.75889753895206; --ry: 226.14332249379467; --a: 22.154793206000193; --hue: 289.6541685534058; --r: 66.17136616191164; --s:2.8746381420552405; --sk: 19.744343026843936;"></div>
<div class="card__confetti" style="--rx: 79.74114448093387; --ry: 213.930216983612; --a: 8.935454534106475; --hue: 189.66088898899568; --r: -21.433296355454104; --s:4.87265534262649; --sk: 1.8888247090036003;"></div>
<div class="card__confetti" style="--rx: 190.7908659957923; --ry: 149.85711868156096; --a: 37.537198996966474; --hue: 165.6978375007003; --r: 29.326001217541176; --s:1.3691589852590857; --sk: 5.03778382987246;"></div>
<div class="card__confetti" style="--rx: 61.7965583911233; --ry: 13.126232509834006; --a: 44.159260211733404; --hue: 26.666024177747836; --r: -53.604840616359695; --s:4.013686135197475; --sk: 5.462524254430008;"></div>
<div class="card__confetti" style="--rx: 26.037323217028494; --ry: 180.55124073150043; --a: 9.03970467793269; --hue: 69.8959489839504; --r: -45.101042178944596; --s:0.5952150004168422; --sk: 15.405029994928876;"></div>
<div class="card__confetti" style="--rx: 8.45504656475101; --ry: 278.8317641761993; --a: 7.86050144163257; --hue: 51.52617742279013; --r: -67.05923641691675; --s:0.45963470719427857; --sk: 12.60371348337667;"></div>
<div class="card__confetti" style="--rx: 150.66310788938307; --ry: 37.33857320464567; --a: 82.3785525367809; --hue: 253.97258949346295; --r: 85.50317259415911; --s:0.6213750383253058; --sk: 5.671383578926958;"></div>
<div class="card__confetti" style="--rx: 269.66843211356445; --ry: 31.198898148067666; --a: 64.94077047067184; --hue: 90.63553046471823; --r: 9.027123647008253; --s:4.217009011884636; --sk: 1.114672026419874;"></div>
<div class="card__confetti" style="--rx: 139.21041291101147; --ry: 121.08711271910555; --a: 62.561189745586724; --hue: 59.029232237498654; --r: -38.687178264796536; --s:0.7939829156865208; --sk: 19.614357010465557;"></div>
<div class="card__confetti" style="--rx: 272.10058050335516; --ry: 349.671210517879; --a: 9.527207877300917; --hue: 189.55207141303939; --r: 51.4023756518566; --s:1.1748322564294023; --sk: 11.958223396687231;"></div>
<div class="card__confetti" style="--rx: 125.75290141980224; --ry: 77.98726408428249; --a: 46.0131231915485; --hue: 300.7952947176525; --r: -33.514394146462564; --s:0.802532240390027; --sk: 15.795296909527764;"></div>
<div class="card__confetti" style="--rx: 212.13648864947038; --ry: 124.89017557555957; --a: 48.527311557095125; --hue: 138.44883543163223; --r: -73.04889094647629; --s:3.9806358182125767; --sk: 13.423041030973714;"></div>
<div class="card__confetti" style="--rx: 82.61685937051737; --ry: 87.93721763666628; --a: 68.87882474213271; --hue: 30.74124422815757; --r: 27.528915347552157; --s:4.428879209379515; --sk: 18.42530651239568;"></div>
<div class="card__outer card__part flip">
<div class="flip__piece flip__piece--front section">
<div class="section__piece section__piece--front front-cover front-cover__front"></div>
<div class="section__piece section__piece--r.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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