css+svg实现制作生日快乐蛋糕动画效果代码-html代码-BFW代码库

css+svg实现制作生日快乐蛋糕动画效果代码

代码语言：html

所属分类：动画

代码描述：css+svg实现制作生日快乐蛋糕动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">

    <style>
        @import url(http://fonts.googleapis.com/css?family=Lato:300italic);
    html,
    body {
      width: 100%;
      height: 100%;
    }
    
    body {
      background: #ee9ca7;
    }
    
    #cake {
      display: block;
      position: relative;
      margin: -10em auto 0 auto;
    }
    
    /* ============================================== Candle
    */
    .velas {
      background: #ffffff;
      border-radius: 10px;
      position: absolute;
      top: 228px;
      left: 50%;
      margin-left: -2.5px;
      margin-top: -8.33333333px;
      width: 5px;
      height: 35px;
      -webkit-transform: translateY(-300px);
      -ms-transform: translateY(-300px);
      transform: translateY(-300px);
      -webkit-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-animation: in 500ms 6s ease-out forwards;
      animation: in 500ms 6s ease-out forwards;
    }
    
    .velas:after,
    .velas:before {
      background: rgba(255, 0, 0, 0.4);
      content: "";
      position: absolute;
      width: 100%;
      height: 2.22222222px;
    }
    
    .velas:after {
      top: 25%;
      left: 0;
    }
    
    .velas:before {
      top: 45%;
      left: 0;
    }
    
    /* ============================================== Fire
    */
    .fuego {
      border-radius: 100%;
      position: absolute;
      top: -20px;
      left: 50%;
      margin-left: -2.2px;
      width: 6.66666667px;
      height: 18px;
    }
    
    .fuego:nth-child(1) {
      -webkit-animation: fuego 2s 6.5s infinite;
      animation: fuego 2s 6.5s infinite;
    }
    
    .fuego:nth-child(2) {
      -webkit-animation: fuego 1.5s 6.5s infinite;
      animation: fuego 1.5s 6.5s infinite;
    }
    
    .fuego:nth-child(3) {
      -webkit-animation: fuego 1s 6.5s infinite;
      animation: fuego 1s 6.5s infinite;
    }
    
    .fuego:nth-child(4) {
      -webkit-animation: fuego 0.5s 6.5s infinite;
      animation: fuego 0.5s 6.5s infinite;
    }
    
    .fuego:nth-child(5) {
      -webkit-animation: fuego 0.2s 6.5s infinite;
      animation: fuego 0.2s 6.5s infinite;
    }
    
    /* ============================================== Animation Fire
    */
    @-webkit-keyframes fuego {
      0%, 100% {
        background: rgba(254, 248, 97, 0.5);
        -webkit-box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
        box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
        -webkit-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
      }
    
      50% {
        background: rgba(255, 50, 0, 0.1);
        -webkit-box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
        box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
        -webkit-transform: translateY(-20px) scale(0);
        transform: translateY(-20px) scale(0);
      }
    }
    @keyframes fuego {
      0%,.........完整代码请登录后点击上方下载按钮下载查看