生日蛋糕生日祝福动画效果
代码语言:html
所属分类:动画
代码描述:生日蛋糕生日祝福动画效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { height: 100%; width: 100%; overflow: hidden; padding: 0; margin: 0; } body { position: relative; background: #f4f5fb; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } * { position: absolute; } *:before, *:after { content: ""; position: absolute; } .container { position: relative; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; } .cake { width: 80%; height: 80%; left: 10%; bottom: 15%; } .filling { height: 10px; width: 100%; background-color: rgba(0, 0, 0, 0.1); top: 50%; } .tier { left: 10%; width: 80%; height: 50px; border-radius: 5px; } .tier .icing-group { width: 100%; height: 30px; overflow: hidden; } .tier .icing-group .icing { border-radius: 0 0 20px 20px; width: 40px; height: 20px; background-color: #f4f5fb; } .tier:after { border-radius: 0 5px 5px 0; right: 0; width: 50%; height: 100%; background-color: rgba(0, 0, 0, 0.05); } .tier-1 { background-color: #f2abe7; bottom: 0; } .tier-1 .filling { background-color: #eb7fda; } .tier-2 { bottom: 50px; width: 60%; height: 45px; left: 20%; background-color: #9fa3ec; } .tier-2 .filling { background-color: #747ae4; } .tier-3 { bottom: 95px; width: 40%; height: 40px; left: 30%; background-color: #86d2e1; } .tier-3 .filling { background-color: #5dc3d7; } .icing:nth-child(1) { left: -20px; } .icing:nth-child(2) { left: 10px; } .icing:nth-child(3) { left: 40px; } .icing:nth-child(4) { left: 70px; } .icing:nth-child(5) { left: 100px; } .icing:nth-child(6) { left: 130px; } .icing:nth-child(7) { left: 160px; } .icing:nth-child(8) { left: 190px; } .icing:nth-child(9) { left: 220px; } .candles { width: 40%; left: 30%; height: 30px; bottom: 135px; } .candles .candle { background-color: #f2abe7; left: 27px; width: 10px; height: 25px; bottom: 0; } .candles .candle:after { width: 50%; height: 100%; right: 0; background-color: rgba(0, 0, 0, 0.1); } .candles .candle .flame { width: 15px; height: 15px; bottom: 30px; left: -3px; } .candles .candle .flame .flame-in { width: 100%; height: 100%; background-color: #fec31e; border-radius: 0 50% 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: flame 2s linear infinite; animation: flame 2s linear infinite; } @-webkit-keyframes flame { 50% { -webkit-transform: scale(0.8) rotate(45deg); transform: scale(0.8) rotate(45deg); } } @keyframes flame { 50% { -webkit-transform: scale(0.8) rotate(45deg); transform: scale(0.8) rotate(45deg); } } .confetti { position: absolute; z-index: 999; } .confetti .rotate { -webkit-animation: driftRotate 1s infinite both ease-in-out; animation: driftRotate 1s infinite both ease-in-out; width: 100%; height: 100%; } .confetti .askew { width: 100%; height: 100%; -webkit-animation: drift 1s infinite alternate both ease-in-out; animation: drift 1s infinite alternate both ease-in-out; } .confetti:nth-child(0) .askew { -webkit-animation-duration: 1.62s; animation-duration: 1.62s; -webkit-animation-delay: -0.3888s; animation-delay: -0.3888s; } .confetti:nth-child(0) .rotate { -webkit-animation-duration: 1.4s; animation-duration: 1.4s; -webkit-animation-delay: -0.336s; animation-delay: -0.336s; } .confetti:nth-child(1) .askew { -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-delay: -1.287s; animation-delay: -1.287s; } .confetti:nth-child(1) .rotate { -webkit-animation-duration: 1.47s; animation-duration: 1.47s; -webkit-animation-delay: -0.0882s; animation-delay: -0.0882s; } .confetti:nth-child(2) .askew { -webkit-animation-duration: 1.84s; animation-duration: 1.84s; -webkit-animation-delay: -1.8216s; animation-delay: -1.8216s; } .confetti:nth-child(2) .rotate { -webkit-animation-duration: 1.4s; animation-duration: 1.4s; -webkit-animation-delay: -0.196s; animation-delay: -0.196s; } .confetti:nth-child(3) .askew { -webkit-animation-duration: 1.31s; animation-duration: 1.31s; -webkit-animation-delay: -1.1135s; animation-delay: -1.1135s; } .confetti:nth-child(3) .rotate { -webkit-animation-duration: 1.79s; animation-duration: 1.79s; -webkit-animation-delay: -1.6468s; animation-delay: -1.6468s; } .confetti:nth-child(4) .askew { -webkit-animation-duration: 1.25s; animation-duration: 1.25s; -webkit-animation-delay: -0.1125s; animation-delay: -0.1125s; } .confetti:nth-child(4) .rotate { -webkit-animation-duration: 1.11s; animation-duration: 1.11s; -webkit-animation-delay: -0.8436s; animation-delay: -0.8436s; } .confetti:nth-child(5) .askew { -webkit-animation-duration: 1.61s; animation-duration: 1.61s; -webkit-animation-delay: -1.5134s; animation-delay: -1.5134s; } .confetti:nth-child(5) .rotate { -webkit-animation-duration: 1.67s; animation-duration: 1.67s; -webkit-animation-delay: -1.4696s; animation-delay: -1.4696s; } .confetti:nth-child(6) .askew { -webkit-animation-duration: 1.54s; animation-duration: 1.54s; -webkit-animation-delay: -0.4774s; animation-delay: -0.4774s; } .confetti:nth-child(6) .rotate { -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-delay: -0.208s; animation-delay: -0.208s; } .confetti:nth-child(7) .askew { -webkit-animation-duration: 1.27s; animation-duration: 1.27s; -webkit-animation-delay: -0.762s; animation-delay: -0.762s; } .confetti:nth-child(7) .rotate { -webkit-animation-duration: 1.18s; animation-duration: 1.18s; -webkit-animation-delay: -0.4012s; animation-delay: -0.4012s; } .confetti:nth-child(8) .askew { -webkit-animation-duration: 1.91s; animation-duration: 1.91s; -webkit-animation-delay: -0.9168s; animation-delay: -0.9168s; } .confetti:nth-child(8) .rotate { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-delay: -0.66s; animation-delay: -0.66s; } .confetti:nth-child(9) .askew { -webkit-animation-duration: 1.77s; animation-duration: 1.77s; -webkit-animation-delay: -1.0266s; animation-delay: -1.0266s; } .confetti:nth-child(9) .rotate { -webkit-animation-duration: 1.68s; animation-duration: 1.68s; -webkit-animation-delay: -1.092s; animation-delay: -1.092s; } .confetti:nth-child(10) .askew { -webkit-animation-duration: 1.03s; animation-duration: 1.03s; -webkit-animation-delay: -0.5871s; animation-delay: -0.5871s; } .confetti:nth-child(10) .rotate { -webkit-animation-duration: 1.66s; animation-duration: 1.66s; -webkit-animation-delay: -0.4482s; animation-delay: -0.4482s; } .confetti:nth-child(11) .askew { -webkit-animation-duration: 1.99s; animation-duration: 1.99s; -webkit-animation-delay: -0.0398s; animation-delay: -0.0398s; } .confetti:nth-child(11) .rotate { -webkit-animation-duration: 1.17s; animation-duration: 1.17s; -webkit-animation-delay: -0.2457s; animation-delay: -0.2457s; } .confetti:nth-child(12) .askew { -webkit-animation-duration: 1.81s; animation-duration: 1.81s; -webkit-animation-delay: -0.6878s; animation-delay: -0.6878s; } .confetti:nth-child(12) .rotate { -webkit-animation-duration: 1.07s; animation-duration: 1.07s; -webkit-animation-delay: -0.7276s; animation-delay: -0.7276s; } .confetti:nth-child(13) .askew { -webkit-animation-duration: 1.92s; animation-duration: 1.92s; -webkit-animation-delay: -1.3824s; animation-delay: -1.3824s; } .confetti:nth-child(13) .rotate { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-delay: -1.14s; animation-delay: -1.14s; } .confetti:nth-child(14) .askew { -webkit-animation-duration: 1.28s; animation-duration: 1.28s; -webkit-animation-delay: -0.8576s; animation-delay: -0.8576s; } .confetti:nth-child(14) .rotate { -webkit-animation-duration: 1.75s; animation-duration: 1.75s; -webkit-animation-delay: -0.28s; animation-delay: -0.28s; } .confetti:nth-child(15) .askew { -webkit-animation-duration: 1.38s; animation-duration: 1.38s; -webkit-animation-delay: -0.8694s; animation-delay: -0.8694s; } .confetti:nth-child(15) .rotate { -webkit-animation-duration: 1.96s; animation-duration: 1.96s; -webkit-animation-delay: -0.7252s; animation-delay: -0.7252s; } .confetti:nth-child(16) .askew { -webkit-animation-duration: 1.02s; animation-duration: 1.02s; -webkit-animation-delay: -0.3264s; animation-delay: -0.3264s; } .confetti:nth-child(16) .rotate { -webkit-animation-duration: 1.04s; animation-duration: 1.04s; -webkit-animation-delay: -0.9152s; animation-delay: -0.9152s; } .confetti:nth-child(17) .askew { -webkit-animation-duration: 1.85s; animation-duration: 1.85s; -webkit-animation-delay: -1.0545s; animation-delay: -1.0545s; } .confetti:nth-child(17) .rotate { -webkit-animation-duration: 1.07s; animation-duration: 1.07s; -webkit-animation-delay: -0.6741s; animation-delay: -0.6741s; } .confetti:nth-child(18) .askew { -webkit-animation-duration: 1.42s; animation-duration: 1.42s; -webkit-animation-delay: -1.0224s; animation-delay: -1.0224s; } .confetti:nth-child(18) .rotate { -webkit-animation-duration: 1.13s; animation-duration: 1.13s; -webkit-animation-delay: -1.0735s; animation-delay: -1.0735s; } .confetti:nth-child(19) .askew { -webkit-animation-duration: 1.97s; animation-duration: 1.97s; -webkit-animation-delay: -1.3396s; animation-delay: -1.3396s; } .confetti:nth-child(19) .rotate { -webkit-animation-duration: 1.04s; animation-duration: 1.04s; -webkit-animation-delay: -0.3744s; animation-delay: -0.3744s; } .confetti:nth-child(20) .askew { -webkit-animation-duration: 1.81s; animation-duration: 1.81s; -webkit-animation-delay: -0.3982s; animation-delay: -0.3982s; } .confetti:nth-child(20) .rotate { -webkit-animation-duration: 1.63s; animation-duration: 1.63s; -webkit-animation-delay: -0.7172s; animation-delay: -0.7172s; } .confetti:nth-child(21) .askew { -webkit-animation-duration: 1.87s; animation-duration: 1.87s; -webkit-animation-delay: -0.4862s; animation-delay: -0.4862s; } .confetti:nth-child(21) .rotate { -webkit-animation-duration: 1.96s; animation-duration: 1.96s; -webkit-animation-delay: -1.8424s; animation-delay: -1.8424s; } .confetti:nth-child(22) .askew { -webkit-animation-duration: 1.08s; animation-duration: 1.08s; -webkit-animation-delay: -0.702s; animation-delay: -0.702s; } .confetti:nth-child(22) .rotate { -webkit-animation-duration: 1.1s; animation-duration: 1.1s; -webkit-animation-delay: -1.067s; animation-delay: -1.067s; } .confetti:nth-child(23) .askew { -webkit-animation-duration: 1.45s; animation-duration: 1.45s; -webkit-animation-delay: -0.4785s; animation-delay: -0.4785s; } .confetti:nth-child(23) .rotate { -webkit-animation-duration: 1.85s; animation-duration: 1.85s; -webkit-animation-delay: -1.7945s; animation-delay: -1.7945s; } .confetti:nth-child(24) .askew { -webkit-animation-duration: 1.01s; animation-duration: 1.01s; -webkit-animation-delay: -0.3939s; animation-delay: -0.3939s; } .confetti:nth-child(24) .rotate { -webkit-animation-duration: 1.18s; animation-duration: 1.18s; -webkit-animation-delay: -0.4248s; animation-delay: -0.4248s; } .confetti:nth-child(25) .askew { -webkit-animation-duration: 1.91s; animation-duration: 1.91s; -webkit-animation-delay: -0.4202s; animation-delay: -0.4202s; } .confetti:nth-child(25) .rotate { -webkit-animation-duration: 1.42s; animation-duration: 1.42s; -webkit-animation-delay: -0.5964s; animation-delay: -0.5964s; } .confetti:nth-child(26) .askew { -webkit-animation-duration: 1.28s; animation-duration: 1.28s; -webkit-animation-delay: -0.4224s; animation-delay: -0.4224s; } .confetti:nth-child(26) .rotate { -webkit-animation-duration: 1.42s; animation-duration: 1.42s; -webkit-animation-delay: -0.3266s; animation-delay: -0.3266s; } .confetti:nth-child(27) .askew { -webkit-animation-duration: 1.44s; animation-duration: 1.44s; -webkit-animation-delay: -1.1232s; animation-delay: -1.1232s; } .confetti:nth-child(27) .rotate { -webkit-animation-duration: 1.33s; animation-duration: 1.33s; -webkit-animation-delay: -0.1995s; animation-delay: -0.1995s; } .confetti:nth-child(28) .askew { -webkit-animation-duration: 1.49s; animation-duration: 1.49s; -webkit-animation-delay: -0.9387s; animation-delay: -0.9387s; } .confetti:nth-child(28) .rotate { -webkit-animation-duration: 1.64s; animation-duration: 1.64s; -webkit-animation-delay: -0.0656s; animation-delay: -0.0656s; } .confetti:nth-child(29) .askew { -webkit-animation-duration: 1.44s; animation-duration: 1.44s; -webkit-animation-delay: -0.7632s; animation-delay: -0.7632s; } .confetti:nth-child(29) .rotate { -webkit-animation-duration: 1.57s; animation-duration: 1.57s; -webkit-animation-delay: -1.1304s; animation-delay: -1.1304s; } .confetti:nth-child(30) .askew { -webkit-animation-duration: 1.95s; animation-duration: 1.95s; -webkit-animation-delay: -1.4235s; animation-delay: -1.4235s; } .confetti:nth-child(30) .rotate { -webkit-animation-duration: 1.46s; animation-duration: 1.46s; -webkit-animation-delay: -1.1534s; animation-delay: -1.1534s; } .confetti:nth-child(31) .askew { -webkit-animation-duration: 1.09s; animation-duration: 1.09s; -webkit-animation-delay: -0.8284s; animation-delay: -0.8284s; } .confetti:nth-child(31) .rotate { -webkit-animation-duration: 1.61s; animation-duration: 1.61s; -webkit-animation-delay: -0.7728s; animation-delay: -0.7728s; } .confetti:nth-child(32) .askew { -webkit-animation-duration: 1.19s; animation-duration: 1.19s; -webkit-animation-delay: -1.1067s; animation-delay: -1.1067s; } .confetti:nth-child(32) .rotate { -webkit-animation-duration: 1.12s; animation-duration: 1.12s; -webkit-animation-delay: -0.392s; animation-delay: -0.392s; } .confetti:nth-child(33) .askew { -webkit-animation-duration: 1.26s; animation-duration: 1.26s; -webkit-animation-delay: -1.197s; animation-delay: -1.197s; } .confetti:nth-child(33) .rotate { -webkit-animation-duration: 1.44s; animation-duration: 1.44s; -webkit-animation-delay: -1.2096s; animation-delay: -1.2096s; } .confetti:nth-child(34) .askew { -webkit-animation-duration: 1.81s; animation-duration: 1.81s; -webkit-animation-delay: -1.267s; animation-delay: -1.267s; } .confetti:nth-child(34) .rotate { -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-delay: -1.001s; animation-delay: -1.001s; } .confetti:nth-child(35) .askew { -webkit-animation-duration: 1.72s; animation-duration: 1.72s; -webkit-animation-delay: -1.0492s; animation-delay: -1.0492s; } .confetti:nth-child(35) .rotate { -webkit-animation-duration: 1.05s; animation-duration: 1.05s; -webkit-animation-delay: -0.7245s; animation-delay: -0.7245s; } .confetti:nth-child(36) .askew { -webkit-animation-duration: 1.32s; animation-duration: 1.32s; -webkit-animation-delay: -0.9636s; animation-delay: -0.9636s; } .confetti:nth-child(36) .rotate { -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-delay: -1.105s; animation-delay: -1.105s; } .confetti:nth-child(37) .askew { -webkit-animation-duration: 1.61s; animation-duration: 1.61s; -webkit-animation-delay: -1.0626s; animation-delay: -1.0626s; } .confetti:nth-child(37) .rotate { -webkit-animation-duration: 1.59s; animation-duration: 1.59s; -webkit-animation-delay: -0.1749s; animation-delay: -0.1749s; } .confetti:nth-child(38) .askew { -webkit-animation-duration: 1.28s; animation-duration: 1.28s; -webkit-animation-delay: -0.4352s; animation-delay: -0.4352s; } .confetti:nth-child(38) .rotate { -webkit-animation-duration: 1.82s; animation-duration: 1.82s; -webkit-animation-delay: -0.7826s; animation-delay: -0.7826s; } .confetti:nth-child(39) .askew { -webkit-animation-duration: 1.44s; animation-duration: 1.44s; -webkit-animation-delay: -0.72s; animation-delay: -0.72s; } .confetti:nth-child(39) .rotate { -webkit-animation-duration: 1.73s; animation-duration: 1.73s; -webkit-animation-delay: -0.4498s; animation-delay: -0.4498s; } .confetti:nth-child(40) .askew { -webkit-animation-duration: 1.77s; animation-duration: 1.77s; -webkit-animation-delay: -0.2832s; animation-delay: -0.2832s; } .confetti:nth-child(40) .rotate { -webkit-animation-duration: 1.26s; animation-duration: 1.26s; -webkit-animation-delay: -1.1214s; animation-delay: -1.1214s; } .confetti:nth-child(41) .askew { -webkit-animation-duration: 1.04s; animation-duration: 1.04s; -webkit-animation-delay: -0.5824s; animation-delay: -0.5824s; } .confetti:nth-child(41) .rotate { -webkit-animation-duration: 1.8s; animation-duration: 1.8s; -webkit-animation-delay: -0.432s; animation-delay: -0.432s; } .confetti:nth-child(42) .askew { -webkit-animation-duration: 1.05s; animation-duration: 1.05s; -webkit-animation-delay: -0.1365s; animation-delay: -0.1365s; } .confetti:nth-child(42) .rotate { -webkit-animation-duration: 1.04s; animation-duration: 1.04s; -webkit-animation-delay: -0.8528s; animation-delay: -0.8528s; } .confetti:nth-child(43) .askew { -webkit-animation-duration: 1.17s; animation-duration: 1.17s; -webkit-animation-delay: -0.819s; animation-delay: -0.819s; } .confetti:nth-child(43) .rotate { -webkit-animation-duration: 1.62s; animation-duration: 1.62s; -webkit-animation-delay: -0.7938s; animation-delay: -0.7938s; } .confetti:nth-child(44) .askew { -webkit-animation-duration: 1.54s; animation-duration: 1.54s; -webkit-animation-delay: -0.1848s; animation-delay: -0.1848s; } .confetti:nth-child(44) .rotate { -webkit-animation-duration: 1.67s; animation-duration: 1.67s; -webkit-animation-delay: -0.9519s; animation-delay: -0.9519s; } .confetti:nth-child(45) .askew { -webkit-animation-duration: 1.63s; animation-duration: 1.63s; -webkit-animation-delay: -0.4075s; animation-delay: -0.4075s; } .confetti:nth-child(45) .rotate { -webkit-animation-duration: 1.67s; animation-duration: 1.67s; -webkit-animation-delay: -0.9853s; animation-delay: -0.9853s; } .confetti:nth-child(46) .askew { -webkit-animation-duration: 1.49s; animation-duration: 1.49s; -webkit-animation-delay: -0.6556s; animation-delay: -0.6556s; } .confetti:nth-child(46) .rotate { -webkit-animation-duration: 1.7s; animation-duration: 1.7s; -webkit-animation-delay: -1.02s; animation-delay: -1.02s; } .confetti:nth-child(47) .askew { -webkit-animation-duration: 1.61s; animation-duration: 1.61s; -webkit-animation-delay: -0.5152s; animation-delay: -0.5152s; } .confetti:nth-child(47) .rotate { -webkit-animation-duration: 1.39s; animation-duration: 1.39s; -webkit-animation-delay: -0.2502s; animation-delay: -0.2502s; } .confetti:nth-child(48) .askew { -webkit-animation-duration: 1.23s; animation-duration: 1.23s; -webkit-animation-delay: -0.0738s; animation-delay: -0.0738s; } .confetti:nth-child(48) .rotate { -webkit-animation-duration: 1.36s; animation-duration: 1.36s; -webkit-animation-delay: -1.1424s; animation-delay: -1.1424s; } .confetti:nth-child(49) .askew { -webkit-animation-duration: 1.21s; animation-duration: 1.21s; -webkit-animation-delay: -0.9438s; animation-delay: -0.9438s; } .confetti:nth-child(49) .rotate { -webkit-animation-duration: 1.71s; animation-duration: 1.71s; -webkit-animation-delay: -1.6758s; animation-delay: -1.6758s; } .confetti:nth-child(50) .askew { -webkit-animation-duration: 1.76s; animation-duration: 1.76s; -webkit-animation-delay: -1.0912s; animation-delay: -1.0912s; } .confetti:nth-child(50) .rotate { -webkit-animation-duration: 1.79s; animation-duration: 1.79s; -webkit-animation-delay: -0.8592s; animation-delay: -0.8592s; } .confetti:nth-child(51) .askew { -webkit-animation-duration: 1.98s; animation-duration: 1.98s; -webkit-animation-delay: -1.3266s; animation-delay: -1.3266s; } .confetti:nth-child(51) .rotate { -webkit-animation-duration: 1.25s; animation-duration: 1.25s; -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .confetti:nth-child(52) .askew { -webkit-animation-duration: 1.87s; animation-duration: 1.87s; -webkit-animation-delay: -0.2992s; animation-delay: -0.2992s; } .confetti:nth-child(52) .rotate { -webkit-animation-duration: 1.41s; animation-duration: 1.41s; -webkit-animation-delay: -0.3525s; animation-delay: -0.3525s; } .confetti:nth-child(53) .askew { -webkit-animation-duration: 1.1s; animation-duration: 1.1s; -webkit-animation-delay: -0.935s; animation-delay: -0.935s; } .confetti:nth-child(53) .rotate { -webkit-animation-duration: 1.13s; animation-duration: 1.13s; -webkit-animation-delay: -0.5537s; animation-delay: -0.5537s; } .confetti:nth-child(54) .askew { -webkit-animation-duration: 1.83s; animation-duration: 1.83s; -webkit-animation-delay: -0.1281s; animation-delay: -0.1281s; } .confetti:nth-child(54) .rotate { -webkit-animation-duration: 1.53s; animation-duration: 1.53s; -webkit-animation-delay: -1.3311s; animation-delay: -1.3311s; } .confetti:nth-child(55) .askew { -webkit-animation-duration: 1.27s; animation-duration: 1.27s; -webkit-animation-delay: -0.381s; animation-delay: -0.381s; } .confetti:nth-child(55) .rotate { -webkit-animation-duration: 1.14s; animation-duration: 1.14s; -webkit-animation-delay: -0.3762s; animation-delay: -0.3762s; } .confetti:nth-child(56) .askew { -webkit-animation-duration: 1.29s; animation-duration: 1.29s; -webkit-animation-delay: -0.5418s; animation-delay: -0.5418s; } .confetti:nth-child(56) .rotate { -webkit-animation-duration: 1.31s; animation-duration: 1.31s; -webkit-animation-delay: -0.917s; animation-delay: -0.917s; } .confetti:nth-child(57) .askew { -webkit-animation-duration: 1.59s; animation-duration: 1.59s; -webkit-animation-delay: -1.2402s; animation-delay: -1.2402s; } .confetti:nth-child(57) .rotate { -webkit-animation-duration: 1.76s; animation-duration: 1.76s; -webkit-animation-delay: -1.2848s; animation-delay: -1.2848s; } .confetti:nth-child(58) .askew { -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-delay: -0.728s; animation-delay: -0.728s; } .confetti:nth-child(58) .rotate { -webkit-animation-duration: 1.43s; animation-duration: 1.43s; -webkit-animation-delay: -1.3585s; animation-delay: -1.3585s; } .confetti:nth-child(59) .askew { -webkit-animation-duration: 1.63s; animation-duration: 1.63s; -webkit-animation-delay: -1.5485s; animation-delay: -1.5485s; } .confetti:nth-child(59) .rotate { -webkit-animation-duration: 1.4s; animation-duration: 1.4s; -webkit-animation-delay: -1.386s; animation-delay: -1.386s; } .confetti:nth-child(60) .askew { -webkit-animation-duration: 1.39s; animation-duration: 1.39s; -webkit-animation-delay: -0.9869s; animation-delay: -0.9869s; } .confetti:nth-child(60) .rotate { -webkit-animation-duration: 1.22s; animation-duration: 1.22s; -webkit-animation-delay: -0.1952s; animation-delay: -0.1952s; } .confetti:nth-child(61) .askew { -webkit-animation-duration: 1.51s; animation-duration: 1.51s; -webkit-animation-delay: -0.4832s; animation-delay: -0.4832s; } .confetti:nth-child(61) .rotate { -webkit-animation-duration: 1.63s; animation-duration: 1.63s; -webkit-animation-delay: -1.0432s; animation-delay: -1.0432s; } .confetti:nth-child(62) .askew { -webkit-animation-duration: 1.78s; animation-duration: 1.78s; -webkit-animation-delay: -1.7266s; animation-delay: -1.7266s; } .confetti:nth-child(62) .rotate { -webkit-animation-duration: 1.93s; animation-duration: 1.93s; -webkit-animation-delay: -0.3281s; animation-delay: -0.3281s; } .confetti:nth-child(63) .askew { -webkit-animation-duration: 1.62s; animation-duration: 1.62s; -webkit-animation-delay: -0.9234s; animation-delay: -0.9234s; } .confetti:nth-child(63) .rotate { -webkit-animation-duration: 1.42s; animation-duration: 1.42s; -webkit-animation-delay: -0.284s; animation-delay: -0.284s; } .confetti:nth-child(64) .askew { -webkit-animation-duration: 1.83s; animation-duration: 1.83s; -webkit-animation-delay: -0.2379s; animation-delay: -0.2379s; } .confetti:nth-child(64) .rotate { -webkit-animation-duration: 1.96s; animation-duration: 1.96s; -webkit-animation-delay: -0.3332s; animation-delay: -0.3332s; } .confetti:nth-child(65) .askew { -webkit-animation-duration: 1.55s; animation-duration: 1.55s; -webkit-animation-delay: -0.8835s; animation-delay: -0.8835s; } .confetti:nth-child(65) .rotate { -webkit-animation-duration: 1.83s; animation-duration: 1.83s; -webkit-animation-delay: -1.7019s; animation-delay: -1.7019s; } .confetti:nth-child(66) .askew { -webkit-animation-duration: 1.49s; animation-duration: 1.49s; -webkit-animation-delay: -0.8344s; animation-delay: -0.8344s; } .confetti:nth-child(66) .rotate { -webkit-animation-duration: 1.93s; animation-duration: 1.93s; -webkit-animation-delay: -0.6948s; animation-delay: -0.6948s; } .confetti:nth-child(67) .askew { -webkit-animation-duration: 1.77s; animation-duration: 1.77s; -webkit-animation-delay: -1.4868s; animation-delay: -1.4868s; } .confetti:nth-child(67) .rotate { -webkit-animation-duration: 1.29s; animation-duration: 1.29s; -webkit-animation-delay: -1.1997s; animation-delay: -1.1997s; } .confetti:nth-child(68) .askew { -webkit-animation-duration: 1.71s; animation-duration: 1.71s; -webkit-animation-delay: -1.197s; animation-delay: -1.197s; } .confetti:nth-child(68) .rotate { -webkit-animation-duration: 1.97s; animation-duration: 1.97s; -webkit-animation-delay: -0.8274s; animation-delay: -0.8274s; } .confetti:nth-child(69) .askew { -webkit-animation-duration: 1.49s; animation-duration: 1.49s; -webkit-animation-delay: -1.0132s; animation-delay: -1.0132s; } .confetti:nth-child(69) .rotate { -webkit-animation-duration: 1.6s; animation-duration: 1.6s; -webkit-animation-delay: -1.472s; animation-delay: -1.472s; } .confetti:nth-child(70) .askew { -webkit-animation-duration: 1.09s; animation-duration: 1.09s; -webkit-animation-delay: -0.6758s; animation-delay: -0.6758s; } .confetti:nth-child(70) .rotate { -webkit-animation-duration: 1.32s; animation-duration: 1.32s; -webkit-animation-delay: -0.6336s; animation-delay: -0.6336s; } .confetti:nth-child(71) .askew { -webkit-animation-duration: 1.95s; animation-duration: 1.95s; -webkit-animation-delay: -1.833s; animation-delay: -1.833s; } .confetti:nth-child(71) .rotate { -webkit-animation-duration: 1.1s; animation-duration: 1.1s; -webkit-animation-delay: -0.638s; animation-delay: -0.638s; } .confetti:nth-child(72) .askew { -webkit-animation-duration: 1.29s; animation-duration: 1.29s; -webkit-animation-delay: -0.387s; animation-delay: -0.387s; } .confetti:nth-child(72) .rotate { -webkit-animation-duration: 1.05s; animation-duration: 1.05s; -webkit-animation-delay: -0.4935s; animation-delay: -0.4935s; } .confetti:nth-child(73) .askew { -webkit-animation-duration: 1.8s; animation-duration: 1.8s; -webkit-animation-delay: -0.666s; animation-delay: -0.666s; } .confetti:nth-child(73) .rotate { -webkit-animation-duration: 1.64s; animation-duration: 1.64s; -webkit-animation-delay: -0.984s; animation-delay: -0.984s; } .confetti:nth-child(74) .askew { -webkit-animation-duration: 1.42s; animation-duration: 1.42s; -webkit-animation-delay: -0.0426s; animation-delay: -0.0426s; } .confetti:nth-child(74) .rotate { -webkit-animation-duration: 1.29s; animation-duration: 1.29s; -webkit-animation-delay: -1.1868s; animation-delay: -1.1868s; } .confetti:nth-child(75) .askew { -webkit-animation-duration: 1.05s; animation-duration: 1.05s; -webkit-animation-delay: -0.441s; animation-delay: -0.441s; } .confetti:nth-child(75) .rotate { -webkit-animation-duration: 1.94s; animation-duration: 1.94s; -webkit-animation-delay: -0.7954s; animation-delay: -0.7954s; } .confetti:nth-child(76) .askew { -webkit-animation-duration: 1.78s; animation-duration: 1.78s; -webkit-animation-delay: -0.9968s; animation-delay: -0.9968s; } .confetti:nth-child(76) .rotate { -webkit-animation-duration: 1.65s; animation-duration: 1.65s; -webkit-animation-delay: -1.287s; animation-delay: -1.287s; } .confetti:nth-child(77) .askew { -webkit-animation-duration: 1.97s; animation-duration: 1.97s; -webkit-animation-delay: -0.985s; animation-delay: -0.985s; } .confetti:nth-child(77) .rotate { -webkit-animation-duration: 1.14s; animation-duration: 1.14s; -webkit-animation-delay: -0.3876s; animation-delay: -0.3876s; } .confetti:nth-child(78) .askew { -webkit-animation-duration: 1.05s; animation-duration: 1.05s; -webkit-animation-delay: -0.9765s; animation-delay: -0.9765s; } .confetti:nth-child(78) .rotate { -webkit-animation-duration: 1.68s; animation-duration: 1.68s; -webkit-animation-delay: -0.6048s; animation-delay: -0.6048s; } .confetti:nth-child(79) .askew { -webkit-animation-duration: 1.15s; animation-duration: 1.15s; -webkit-animation-delay: -1.15s; animation-delay: -1.15s; } .confetti:nth-child(79) .rotate { -webkit-animation-duration: 1.97s; animation-duration: 1.97s; -webkit-animation-delay: -0.9653s; animation-delay: -0.9653s; } .confetti:nth-child(80) .askew { -webkit-animation-duration: 1.09s; animation-duration: 1.09s; -webkit-animation-delay: -0.6213s; animation-delay: -0.6213s; } .confetti:nth-child(80) .rotate { -webkit-animation-duration: 1.42s; animation-duration: 1.42s; -webkit-animation-delay: -1.3064s; animation-delay: -1.3064s; } .confetti:nth-child(81) .askew { -webkit-animation-duration: 1.7s; animation-duration: 1.7s; -webkit-animation-delay: -0.476s; animation-delay: -0.476s; } .confetti:nth-child(81) .rotate { -webkit-animation-duration: 1.22s; animation-duration: 1.22s; -webkit-animation-delay: -1.0492s; animation-delay: -1.0492s; } .confetti:nth-child(82) .askew { -webkit-animation-duration: 1.72s; animation-duration: 1.72s; -webkit-animation-delay: -0.43s; animation-delay: -0.43s; } .confetti:nth-child(82) .rotate { -webkit-animation-duration: 1.81s; animation-duration: 1.81s; -webkit-animation-delay: -0.8145s; animation-delay: -0.8145s; } .confetti:nth-child(83) .askew { -webkit-animation-duration: 1.94s; animation-duration: 1.94s; -webkit-animation-delay: -1.164s; animation-delay: -1.164s; } .confetti:nth-child(83) .rotate { -webkit-animation-duration: 1.18s; animation-duration: 1.18s; -webkit-animation-delay: -0.767s; animation-delay: -0.767s; } .confetti:nth-child(84) .askew { -webkit-animation-duration: 1.13s; animation-duration: 1.13s; -webkit-animation-delay: -0.4633s; animation-delay: -0.4633s; } .confetti:nth-child(84) .rotate { -webkit-animation-duration: 1.08s; animation-duration: 1.08s; -webkit-animation-delay: -0.3024s; animation-delay: -0.3024s; } .confetti:nth-child(85) .askew { -webkit-animation-duration: 1.87s; animation-duration: 1.87s; -webkit-animation-delay: -0.8228s; animation-delay: -0.8228s; } .confetti:nth-child(85) .rotate { -webkit-animation-duration: 1.95s; animation-duration: 1.95s; -webkit-animation-delay: -0.7995s; animation-delay: -0.7995s; } .confetti:nth-child(86) .askew { -webkit-animation-duration: 1.44s; animation-duration: 1.44s; -webkit-animation-delay: -0.6624s; animation-delay: -0.6624s; } .confetti:nth-child(86) .rotate { -webkit-animation-duration: 1.05s; animation-duration: 1.05s; -webkit-animation-delay: -0.6405s; animation-delay: -0.6405s; } .confetti:nth-child(87) .askew { -webkit-animation-duration: 1.29s; animation-duration: 1.29s; -webkit-animation-delay: -0.6837s; animation-delay: -0.6837s; } .confetti:nth-child(87) .rotate { -webkit-animation-duration: 1.96s; animation-duration: 1.96s; -webkit-animation-delay: -1.2152s; animation-delay: -1.2152s; } .confetti:nth-child(88) .askew { -webkit-animation-duration: 1.85s; animation-duration: 1.85s; -webkit-animation-delay: -0.074s; animation-delay: -0.074s; } .confetti:nth-child(88) .rotate { -webkit-animation-duration: 1.05s; animation-duration: 1.05s; -webkit-animation-delay: -0.9135s; animation-delay: -0.9135s; } .confetti:nth-child(89) .askew { -webkit-animation-duration: 1.83s; animation-duration: 1.83s; -webkit-animation-delay: -1.83s; animation-delay: -1.83s; } .confetti:nth-child(89) .rotate { -webkit-animation-duration: 1.96s; animation-duration: 1.96s; -webkit-animation-delay: -0.8428s; animation-delay: -0.8428s; } .confetti:nth-child(90) .askew { -webkit-animation-duration: 1.93s; animation-duration: 1.93s; -webkit-animation-delay: -0.579s; animation-delay: -0.579s; } .confetti:nth-child(90) .rotate { -webkit-animation-duration: 1.05s; animation-duration: 1.05s; -webkit-animation-delay: -0.8505s; animation-delay: -0.8505s; } .confetti:nth-child(91) .askew { -webkit-animation-duration: 1.4s; animation-duration: 1.4s; -webkit-animation-delay: -1.316s; animation-delay: -1.316s; } .confetti:nth-child(91) .rotate { -webkit-animation-duration: 1.68s; animation-duration: 1.68s; -webkit-animation-delay: -1.1424s; animation-delay: -1.1424s; } .confetti:nth-child(92) .askew { -webkit-animation-duration: 1.56s; animation-duration: 1.56s; -webkit-animation-delay: -0.8736s; animation-delay: -0.8736s; } .confetti:nth-child(92) .rotate { -webkit-animation-duration: 1.57s; animation-duration: 1.57s; -webkit-animation-delay: -0.5181s; animation-delay: -0.5181s; } .confetti:nth-child(93) .askew { -webkit-animation-duration: 1.8s; animation-duration: 1.8s; -webkit-animation-delay: -0.09s; animation-delay: -0.09s; } .confetti:nth-child(93) .rotate { -webkit-animation-duration: 1.42s; animation-duration: 1.42s; -webkit-animation-delay: -0.6248s; animation-delay: -0.6248s; } .confetti:nth-child(94) .askew { -webkit-animation-duration: 1.13s; animation-duration: 1.13s; -webkit-animation-delay: -0.0678s; animation-delay: -0.0678s; } .confetti:nth-child(94) .rotate { -webkit-animation-duration: 1.59s; animation-duration: 1.59s; -webkit-animation-delay: -0.5724s; animation-delay: -0.5724s; } .confetti:nth-child(95) .askew { -webkit-animation-duration: 1.9s; animation-duration: 1.9s; -webkit-animation-delay: -0.171s; animation-delay: -0.171s; } .confetti:nth-child(95) .rotate { -webkit-animation-duration: 1.41s; animation-duration: 1.41s; -webkit-animation-delay: -0.1269s; animation-delay: -0.1269s; } .confetti:nth-child(96) .askew { -webkit-animation-duration: 1.26s; animation-duration: 1.26s; -webkit-animation-delay: -0.7182s; animation-delay: -0.7182s; } .confetti:nth-child(96) .rotate { -webkit-animation-duration: 1.33s; animation-duration: 1.33s; -webkit-animation-delay: -1.3034s; animation-delay: -1.3034s; } .confetti:nth-child(97) .askew { -webkit-animation-duration: 1.55s; animation-duration: 1.55s; -webkit-animation-delay: -0.341s; animation-delay: -0.341s; } .confetti:nth-child(97) .rotate { -webkit-animation-duration: 1.44s; animation-duration: 1.44s; -webkit-animation-delay: -1.2672s; animation-delay: -1.2672s; } .confetti:nth-child(98) .askew { -webkit-animation-duration: 1.34s; animation-duration: 1.34s; -webkit-animation-delay: -0.469s; animation-delay: -0.469s; } .confetti:nth-child(98) .rotate { -webkit-animation-duration: 1.24s; animation-duration: 1.24s; -webkit-animation-delay: -0.8804s; animation-delay: -0.8804s; } .confetti:nth-child(99) .askew { -webkit-animation-duration: 1.14s; animation-duration: 1.14s; -webkit-animation-delay: -0.2052s; animation-delay: -0.2052s; } .confetti:nth-child(99) .rotate { -webkit-animation-duration: 1.42s; animation-duration: 1.42s; -webkit-animation-delay: -0.0426s; animation-delay: -0.0426s; } .confetti:nth-child(100) .askew { -webkit-animation-duration: 1.08s; animation-duration: 1.08s; -webkit-animation-delay: -0.7128s; animation-delay: -0.7128s; } .confetti:nth-child(100) .rotate { -webkit-animation-duration: 1.91s; animation-duration: 1.91s; -webkit-animation-delay: -1.6235s; animation-delay: -1.6235s; } .confetti:nth-child(101) .askew { -webkit-animation-duration: 1.03s; animation-duration: 1.03s; -webkit-animation-delay: -.........完整代码请登录后点击上方下载按钮下载查看
网友评论0