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

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

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