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