css+svg实现中秋兔子吃月饼动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css+svg实现中秋兔子吃月饼动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
#story {
  width: 20%;
  padding: 50px 0;
}

body {
  text-align: center;
}

#rabbit {
  animation: popup 5s ease infinite;
  transform-origin: 80% 50%;
  left: 50px;
  position: relative;
}
#tongue {
  animation: tongueout 1.5s ease infinite alternate;
  tranform-origin: top center;
}

#mooncake-0 {
  animation: mask0 5s ease infinite;
  transform-origin: center center;
}

#mooncake-1 {
  animation: mask1 5s ease infinite ;
}

#mooncake-2 {
  animation: mask2 5s ease infinite;
}
#mooncake-3 {
  animation: mask3 5s ease infinite;
/*   opacity: 0; */
}


@keyframes zoom {
  from {
    transform: scale(0);
  } to {
    transform: scale(1);
  }
}
@keyframes mask0 {
  0% {
    mask: none;
    transform: scale(1);
  }
  30% {
    mask: url(#mask-8);
  }
}
@keyframes mask1 {
  0% {
    mask: none;
  }
  50% {
    mask: url(#mask-6);
  }
}
@keyframes mask2 {
  0% {
    mask: none;
  }
  70% {
    mask: url(#mask-4);
  }
}
@keyframes mask3 {
  0% {
    mask: none;
  }
  90% {
    mask: url(#mask-2);
  }
}

@keyframes popup {
  20% {
    transform: scale(1) translate(25px, 10px);
  }
  40% {
    transform: scale(1) translate(25px, 0px);
  }
}

@keyframes tongueout {
  0% {
    transform: rotate(-5deg) translate(-5px,2px);
  }
  100% {
    transform: rotate(10deg) translate(1px,-5px);
  }
}
</style>



</head>

<body  >
  <?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 99 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="story">
    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
    <title>Group</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M0,0 L100,0 L100,100 L0,100 L0,0 Z M24.588496,36.1448345 C26.7858382,40.8841397 30.4813571,42.1369565 33.5634819,44.2140702 C35.7667757,45.6989197 37.2157057,48.5332706 39.6010707,49.1081017 C42.164425,49.725825 44.408451,52.4494433 46.5706037,53.1795427 C49.2350316,54.0792466 51.6940849,53.0140854 53.4946368,54.0781141 C56.7563158,56.0055899 59.7225954,53.6509917 62.0630081,51.4213938 C64.4034207,49.1917959 69.4648971,49.4540952 73.4736144,49.1081017 C77.4823316,48.7621082 79.5047875,45.614727 83.1943962,40.6259984 C86.8840048,35.6372698 93.6365999,34.6820524 90.411424,26.6563892 C88.8109525,22.6737088 76.1112942,11.4142584 58.5434514,12.170951 C54.5212655,12.3441969 48.584872,16.0990379 40.734271,23.4354738 C27.4583286,26.4902116 22.0764035,30.7266652 24.588496,36.1448345 Z" id="path-1"></path>
        <path d="M100,14.6464814 L100,0 L0,0 L0,100 L100,100 L100,55.5424779 C93.3517429,55.8803461 85.3835424,55.1490139 81.8654026,52.4300311 C78.2222309,49.6144177 73.7340346,44.8113397 68.1635787,42.6913314 C62.5931227,40.5713231 61.5114543,39.4170852 58.0980175,31.1798536 C55.8223931,25.6883659 55.0971675,19.112527 55.922341,11.452337 C75.0306032,5.38540889 89.7231562,6.4501237 100,14.6464814 Z" id="path-3"></path>
        <path d="M0,30.968446 L0,100 L100,100 L100,0 L0,0 L0,21.9569483 C6.05177465,10.5682309 14.3541937,3.95048148 24.9072573,2.10369995 C35.2049485,0.301608453 42.1370011,3.11059374 43.8746125,6.13323307 C48.1853577,13.6319333 50.9036046,17.3211881 47.9441998,22.7748611 C44.9847949,28.228534 40.3817081,34.1879655 36.4601564,35.0884975 C32.5386047,35.9890294 26.6859162,36.2089109 22.3626178,39.0424598 C18.0393195,41.8760086 16.6313445,41.9312125 8.67063757,39.0424598 C4.84489791,37.6541891 1.95468539,34.9628512 -6.37745412e-12,30.968446 Z" id="path-5"></path>
        <path d="M32.021975,0 L0,0 L0,100 L100,100 L100,0 L81.1773558,0 C87.1836586,2.80103874 90.2511865,5.4753987 90.3799396,8.02307987 C90.8165029,16.6615081 84.1208106,15.3662539 79.0080459,18.8819704 C73.8952812,22.3976869 68.867138,21.2380837 64.9641769,20.2601163 C61.0612158,19.282149 57.8703382,21.44141 54.9315485,22.7875725 C51.9927587,24.1337349 46.9143495,23.1444793 44.4578962,20.2601163 C42.0014428,17.3757534 44.4578962,15.4943919 38.9461457,14.7992062 C33.8465821,14.1560088 31.1195643,7.0972783 32.021975,3.44169138e-15 Z" id="path-7"></path>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group" transform="translate(-1.000000, 0.000000)">
            <g id="rabbit" transform="translate(25.000000, 0.000000)">
                <path d="M10.5,0 L10.5,0 L10.5,0 C15.7467051,-9.63804095e-16 20,4.25329488 20,9.5 L20,45 L5,45 L1.84112801,9.46269009 L1.84112801,9.46269009 C1.41604686,4.68052713 4.94815954,0.459221735 9.73032249,0.0341405838 C9.98625104,0.0113913791 10.2430624,4.71986787e-17 10.5,0 Z" id="left-ear" fill="#F5E6DB"></path>
                <path d="M39.5,-4.50431793e-15 L39.5,-4.50431793e-15 L39.5,-5.32907052e-15 C44.3010183,-6.21101478e-15 48.1930126,3.8919943 48.1930126,8.69301258 C48.1930126,8.94995022 48.1816212,9.20676153 48.158872,9.46269009 L45,45 L30,45 L30,9.5 L30,9.5 C30,4.25329488 34.2532949,-4.365269e-15 39.5,-5.32907052e-15 Z" id="right-ear" fill="#F5E6DB"></path>
                <path d="M25,28 L25,28 L25,28 C38.8071187,28 50,39.1928813 50,53 L50,78 L0,78 L0,53 L0,53 C-1.69088438e-15,39.1928813 11.1928813,28 25,28 Z" id="head" fill="#FFF2E8"></path>
                <rect id="tongue" fill="#FF6D6D" x="25" y="55" width="8" height="10" rx="4"></rect>
                <path d="M15,53 C17.2833133,56.9257014 20.6166466,58.888552 25,58.888552 C29.3833534,58.888552 32.7166867,56.9257014 35,53" id="mouth" stroke="#DFC8B6" stroke-width="2" fill="#FFF2E8" stroke-linecap="round"></path>
            </g>
            <g id="mooncake-4" transform="translate(0.000000, 21.000000)">
                <mask id="mask-2" fill="white">
     .........完整代码请登录后点击上方下载按钮下载查看