<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GSAP+SVG 做圣诞蛋糕的动画</title>
<style>
body {
background: #9AE5A1;
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
max-width: 580px;
width: 75vw;
}
.color-bg {
fill: #9AE5A1;
}
.color-brown-1 {
fill: #D6BDAB;
}
.color-brown-2 {
fill: #996666;
}
.color-brown-3 {
fill: #996633;
}
.color-beige {
fill: #F2EAC7;
}
.color-white {
fill: #FFFFFF;
}
.color-red-1 {
fill: #FF6666;
}
.color-red-2 {
fill: #FF8080;
}
.color-red-3 {
fill: #FF9999;
}
.color-red-4 {
fill: #FFB3B3;
}
.color-red-5 {
fill: #FFCCCC;
}
.color-red-6 {
fill: #FFD9D9;
}
.color-red-7 {
fill: #FFE6E6;
}
.color-red-8 {
fill: #FFF2F2;
}
.color-green {
fill: #66CC99;
}
.color-bordeaux-1 {
fill: #993333;
}
.color-bordeaux-2 {
fill: #CC6666;
}
.color-yellow {
fill: #FFCC66;
}
.color-gold {
fill: #FFCC99;
}
.color-gray {
fill: #CCCCCC;
}
.shadow {
fill-opacity: 0.1;
}
#foundation,
#sponges > .sponge,
#sponge-creams > .sponge-cream,
#cut-strawberries-1 > .cut-strawberry,
#cut-strawberries-2 > .cut-strawberry,
#cream-sides > .cream-side,
#cream-whips > .cream-whip,
#strawberries-1 > .strawberry,
#strawberries-2 > .strawberry,
#ribon,
#chocolate,
#spatula,
#bag {
visibility: hidden;
}
.chocolate-message path {
fill: none;
stroke: #FFCC99;
stroke-width: 1;
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
</style>
</head>
<body>
<script src="js/jquery-1.11.1.min.js"></script>
<div class="container">
<svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 514 522" enable-background="new 0 0 514 522" xml:space="preserve">
<rect id="bg" class="color-bg" width="514" height="522" />
<g id="foundation">
<rect class="color-brown-1" x="108.229" y="497" width="148.771" height="25" />
<g>
<rect class="color-brown-1" x="257" y="497" width="148.771" height="25" />
<rect class="shadow" x="257" y="497" width="148.771" height="25" />
</g>
</g>
<g id="sponges">
<g class="sponge">
<rect class="color-beige" x="132.416" y="467" width="124.584" height="30" />
<g>
<rect class="color-beige" x="257" y="467" width="124.583" height="30" />
<rect class="shadow" x="257" y="467" width="124.583" height="30" />
</g>
</g>
<g class="sponge">
<rect class="color-beige" x="132.416" y="417" width="124.584" height="30" />
<g>
<rect class="color-beige" x="257" y="417" width="124.583" height="30" />
<rect class="shadow" x="257" y="417" width="124.583" height="30" />
</g>
</g>
<g class="sponge">
<rect class="color-beige" x="132.416" y="367" width="124.584" height="30" />
<g>
<rect class="color-beige" x="257" y="367" width="124.583" height="30" />
<rect class="shadow" x="257" y="367" width="124.583" height="30" />
</g>
</g>
</g>
<!--/sponges-->
<g id="sponge-creams">
<rect class="sponge-cream color-white" x="132.416" y="447" width="124.584" height="20" />
<g class="sponge-cream">
<rect class="color-white" x="257" y="447" width="124.584" height="20" />
<rect class="shadow" x="257" y="447" width="124.584" height="20" />
</g>
<rect class="sponge-cream color-white" x="132.416" y="397" width="124.584" height="20" />
<g class="sponge-cream">
<rect class="color-white" x="257" y="397" width="124.584" height="20" />
<rect class="shadow" x="257" y="397" width="124.584" height="20" />
</g>
</g>
<!--/sponge-creams-->
<g id="cut-strawberries-1">
<g class="cut-strawberry">
<path class="color-red-1" d="M183.731,460.506c0,1.937-1.563,3.506-3.491,3.506h-44.334c-1.928,0-3.491-1.569-3.491-3.506v-7.012
c0-1.937,1.563-3.506,3.491-3.506h44.334c1.927,0,3.491,1.569,3.491,3.506V460.506z" />
<path class="color-red-2" d="M135.907,464.012c-1.638,0-2.967-1.401-2.967-3.13v-7.763c0-1.729,1.329-3.131,2.967-3.131h44.334
c1.638,0,2.967,1.401,2.967,3.131v7.763c0,1.729-1.329,3.13-2.967,3.13H135.907z" />
<path class="color-red-3" d="M135.907,464.012c-1.348,0-2.444-1.233-2.444-2.755v-8.514c0-1.521,1.096-2.755,2.444-2.755h44.334
c1.348,0,2.444,1.234,2.444,2.755v8.514c0,1.521-1.096,2.755-2.444,2.755H135.907z" />
<path class="color-red-4" d="M135.907,464.012c-1.059,0-1.92-1.066-1.92-2.38v-9.265c0-1.312,0.861-2.379,1.92-2.379h44.334
c1.06,0,1.92,1.067,1.92,2.379v9.265c0,1.313-0.86,2.38-1.92,2.38H135.907z" />
<path class="color-red-5" d="M135.907,464.012c-0.77,0-1.396-0.898-1.396-2.004v-10.016c0-1.104,0.626-2.004,1.396-2.004h44.334
c0.77,0,1.396,0.899,1.396,2.004v10.016c0,1.105-0.626,2.004-1.396,2.004H135.907z" />
<path class="color-red-6" d="M139.633,449.988h36.882c0.578,0,1.048,1.289,1.048,2.117v9.786c0,0.829-0.47,2.12-1.048,2.12h-36.882
c-0.578,0-1.048-1.288-1.048-2.118v-9.786C138.585,451.279,139.055,449.988,139.633,449.988z" />
<path class="color-red-7" d="M143.358,449.988h29.432c0.385,0,0.697,1.679,0.697,2.231v9.557c0,0.553-0.312,2.235-0.697,2.235h-29.432
c-0.386,0-0.698-1.679-0.698-2.231v-9.557C142.66,451.671,142.973,449.988,143.358,449.988z" />
<path class="color-red-8" d="M147.084,449.988h21.98c0.192,0,0.349,2.068,0.349,2.345v9.327c0,0.276-0.156,2.352-0.349,2.352h-21.98
c-0.193,0-0.35-2.068-0.35-2.345v-9.327C146.734,452.063,146.891,449.988,147.084,449.988z" />
<rect class="color-white" x="150.809" y="449.988" width="14.53" height="14.023" />
</g>
<g class="cut-strawberry">
<path class="color-red-1" d="M249.609,460.506c0,1.937-1.563,3.506-3.49,3.506h-44.335c-1.927,0-3.49-1.569-3.49-3.506v-7.012
c0-1.938,1.563-3.506,3.49-3.506h44.335c1.926,0,3.49,1.568,3.49,3.506V460.506z" />
<path class="color-red-2" d="M201.784,464.012c-1.638,0-2.967-1.401-2.967-3.13v-7.763c0-1.729,1.329-3.131,2.967-3.131h44.335
c1.638,0,2.967,1.401,2.967,3.131v7.763c0,1.729-1.329,3.13-2.967,3.13H201.784z" />
<path class="color-red-3" d="M201.784,464.012c-1.349,0-2.443-1.234-2.443-2.755v-8.514c0-1.521,1.094-2.755,2.443-2.755h44.335
c1.348,0,2.443,1.234,2.443,2.755v8.514c0,1.521-1.095,2.755-2.443,2.755H201.784z" />
<path class="color-red-4" d="M201.784,464.012c-1.059,0-1.921-1.066-1.921-2.38v-9.265c0-1.312,0.862-2.379,1.921-2.379h44.335
c1.059,0,1.919,1.067,1.919,2.379v9.265c0,1.313-0.86,2.38-1.919,2.38H201.784z" />
<path class="color-red-5" d="M201.784,464.012c-0.769,0-1.396-0.898-1.396-2.004v-10.016c0-1.104,0.628-2.004,1.396-2.004h44.335
c0.769,0,1.396,0.899,1.396,2.004v10.016c0,1.105-0.627,2.004-1.396,2.004H201.784z" />
<path class="color-red-6" d="M205.51,449.988h36.883c0.577,0,1.047,1.289,1.047,2.117v9.786c0,0.829-0.47,2.12-1.047,2.12H205.51
c-0.577,0-1.046-1.288-1.046-2.119v-9.785C204.464,451.279,204.933,449.988,205.51,449.988z" />
<path class="color-red-7" d="M209.236,449.988h29.431c0.385,0,0.698,1.679,0.698,
