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