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