生日蛋糕生日祝福动画效果-html代码-BFW代码库

代码语言：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 {
 .........完整代码请登录后点击上方下载按钮下载查看