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

代码语言:html

所属分类:动画

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

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

网友评论0