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

代码语言：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%, 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);
      }
    }
    @-webkit-keyframes in {
      to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
    }
    @keyframes in {
      to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
    }
    .text {
      color: #8b6a60;
      font-family: 'Lato', sans-serif;
      font-weight: 300;
      font-style: italic;
      text-align: center;
    }
    .text h1 {
      font-size: 1.4em;
    }
    </style>

</head>

<body>

    <div class="velas">
        <div class="fuego"></div>
        <div class="fuego"></div>
        <div class="fuego"></div>
        <div class="fuego"></div>
        <div class="fuego"></div>
    </div>
    <svg id="cake" version="1.1" x="0px" y="0px" width="200px" height="500px" viewBox="0 0 200 500" enable-background="new 0 0 200 500" xml:space="preserve">
    <path fill="#a88679" d="M173.667-13.94c-49.298,0-102.782,0-147.334,0c-3.999,0-4-16.002,0-16.002
                c44.697,0,96.586,0,147.334,0C177.667-29.942,177.668-13.94,173.667-13.94z">
        <animate id="bizcocho_3" attributeName="d" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1" begin="relleno_2.end" dur="0.3s" fill="freeze" values="
                          M173.667-13.94c-49.298,0-102.782,0-147.334,0c-3.999,0-4-16.002,0-16.002
                c44.697,0,96.586,0,147.334,0C177.667-29.942,177.668-13.94,173.667-13.94z
                          ;
                          M173.667,411.567c-47.995,12.408-102.955,12.561-147.334,0
                c-3.848-1.089-0.189-16.089,3.661-15.002c44.836,12.66,90.519,12.753,139.427,0.07
                C173.293,395.631,177.541,410.566,173.667,411.567z
                          ;
                          M173.667,427.569c-49.795,0-101.101,0-147.334,0c-3.999,0-4-16.002,0-16.002
                c46.385,0,97.539,0,147.334,0C177.668,411.567,177.667,427.569,173.667,427.569z
                          " />
    </path>
    <path fill="#8b6a60" d="M100-178.521c1.858,0,3.364,1.506,3.364,3.363c0,0,0,33.17,0,44.227
                c0,19.144,0,57.431,0,76.574c0,10.152,0,40.607,0,40.607c0,1.858-1.506,3.364-3.364,3.364l0,0c-1.858,0-3.364-1.506-3.364-3.364c0,0,0-30.455,0-40.607.........完整代码请登录后点击上方下载按钮下载查看