<!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>CSS3+SVG 七巧板拼成自行车动画</title>
<style>
body {
background: #fffed7;
overflow: hidden;
}
.svg-container {
height: 500px;
width: 500px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
overflow: hidden;
cursor: pointer;
}
svg {
height: 100%;
width: 100%;
margin: 0 auto;
display: block;
overflow: hidden;
}
svg * {
-webkit-transform-origin: top;
transform-origin: top;
-webkit-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
svg #green_blue_demi_circle {
-webkit-transform-origin: 31% 97%;
transform-origin: 31% 97%;
}
.animated * {
-webkit-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.animated #mint_triangle {
-webkit-transform: rotate(56deg);
transform: rotate(56deg);
}
.animated #red_rectangle {
-webkit-transform: scale(0) translateX(-100%);
transform: scale(0) translateX(-100%);
}
.animated #pale_pink {
-webkit-transform: translateX(120%);
transform: translateX(120%);
}
.animated #pale_yellow_rectangle {
-webkit-transform: translate(-30px, 50px);
transform: translate(-30px, 50px);
}
.animated #yellow_top {
-webkit-transform: translate(-30px, 50px);
transform: translate(-30px, 50px);
}
.animated #pink_triangle {
-webkit-transform: translateX(250%);
transform: translateX(250%);
}
.animated #purple_rectangle {
-webkit-transform: translateX(160%);
transform: translateX(160%);
}
.animated #green_big {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.animated rect {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.animated #purple_coude {
-webkit-transform: translate(50px, 50px);
transform: translate(50px, 50px);
}
.animated #orange_line {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.animated #dark_yellow_demi_wheel,
.animated #yellow_demi_wheel {
-webkit-transform: translateX(86%) rotate(62deg);
transform: translateX(86%) rotate(62deg);
}
.animated #purple_wheel,
.animated #green_blue_demi_circle {
-webkit-transform: translateX(-80%) rotate(242deg);
transform: translateX(-80%) rotate(242deg);
}
.animated #green_demi_circle,
.animated #saumon_demi_circle {
-webkit-transform: translate(-330%, -30%);
transform: translate(-330%, -30%);
}
.animated #purple_circle {
-webkit-transform: translate(57%, 55%) rotate(246deg);
transform: translate(57%, 55%) rotate(246deg);
}
</style>
</head>
<body>
<div class="svg-container">
<svg version="1.1" id="Calque_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1240 881" style="enable-background:new 0 0 1240 881;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: url(#saumon_triangle_1_);
}
.st1 {
fill: url(#pink_triangle_1_);
}
.st2 {
fill: #5F2952;
}
.st3 {
fill: #F9F8D2;
}
.st4 {
fill: #F9D900;
}
.st5 {
fill: url(#green_big_1_);
}
.st6 {
fill: #E42517;
}
.st7 {
fill: #FF655F;
}
.st8 {
fill: #541933;
}
.st9 {
fill: #FD615C;
}
.st10 {
fill: #5D2750;
}
.st11 {
fill: #FC625C;
}
.st12 {
fill: #622C55;
}
.st13 {
fill: url(#yellow_demi_wheel_1_);
}
.st14 {
fill: url(#dark_yellow_demi_wheel_1_);
}
.st15 {
opacity: 0.68;
fill: #9BFBE7;
}
.st16 {
fill: #078289;
}
.st17 {
fill: #00D9B7;
}
.st18 {
fill: #FEE990;
}
</style>
<linearGradient id="saumon_triangle_1_" gradientUnits="userSpaceOnUse" x1="488" y1="411.5" x2="851.3333" y2="411.5">
<stop offset="0" style="stop-color:#F96762" />
<stop offset="1" style="stop-color:#FF9E9C" />
</linearGradient>
<linearGradient id="pink_triangle_1_" gradientUnits="userSpaceOnUse" x1="476" y1="-1.023636e-08" x2="476" y2="330.3333">
<stop offset="0" style="stop-color:#F8D4BD" />
<stop offset="1" style="stop-color:#FF9E9C" />
</linearGradient>
<polygon id="pink_triangle" class="st1" points="248,0 704,0 530.7,330.3 " />
<polygon id="purple_rectangle" class="st2" points="852,280.3 556,281 703.7,0 1000,0 " />
<polygon id="pale_yellow_rectangle" class="st3" points="851.7,281 765,281 789.7,231.7 877,231.7 " />
<polygon id="yellow_top" class="st4" points="780,251 789.7,231 877,231 867.7,250.3 " />
<linearGradient id="green_big_1_" gradientUnits="userSpaceOnUse" x1="1046.3334" y1="543.6667" x2="1046.3334" y2="-8.740244e-09">
<stop offset="0" style="stop-color:#00D5B3" />
<stop offset="1" style="stop-color:#8EF1CA" />
</linearGradient>
<polygon id="green_big" class="st5" points="1241,0 998.3,0 851.7,280.3 991,543.7 1241,543.7 " />
<polygon id="pale_pink" class="st7" points="529,281 555,281 499,388.5 478,377 " />
<polygon id="purple_coude" class="st8" points="446,232 553.5,232.5 528.5,281 507.5,281 523.5,249 462,250 " />
<polygon id="orange_line" class="st9" points="1241.7,687.7 1241.7,715 417,715 469.7,687.7 " />
<path id="purple_circle" class="st10" d="M771,544.2c-0.7,31.8-26.7,57.4-58.6,57.4c-32.4,0-58.7-26.3-58.7-58.7
c0-17.5,8.2-34.1,20.3-44.9l38,46h1L771,544.2z" />
<path id="purple_wheel" class="st12" d="M990,362c-98.3,0-178,79.7-178,178s79.7,178,178,178s178-79.7,178-178S1088.3,362,990,362z
M990,677c-75.7,0-137-61.3-137-137s61.3-137,137-137s137,61.3,137,137S1065.7,677,990,677z" />
<polygon id="mint_triangle" class="st15" points="712,544.3 852,281 992,544.3 " />
<polygon id="saumon_triangle" class="st0" points="712,543 851.3,281 488,280 " />
<linearGradient id="yellow_demi_wheel_1_" gradientUnits="userSpaceOnUse" x1="250.3516" y1="652.4041" x2="427.3823" y2="345.778">
<stop offset="0" style="stop-color:#FFE882" />
<stop offset="1" style="stop-color:#FBFACB" />
</linearGradient>
<path id="yellow_demi_wheel" class="st13" d="M499.2,387.3L335,700.3c-61.3-27.8-104-89.6-104-161.3c0-97.8,79.2-177,177-177
C441.4,362,472.6,371.2,499.2,387.3z" />
<linearGradient id="dark_yellow_demi_wheel_1_" gradientUnits="userSpaceOnUse" x1="410.9219" y1="539.9367" x2="561.5098" y2="626.8787">
<stop offset="0" style="stop-color:#F7A300" />
<stop offset="7.545835e-02" style="stop-color:#FAB503" />
<stop offset="0.18" style="stop-color:#FCC605" />
<stop offset="0.3102" style="stop-color:#FED107" />
<stop offset="0.4929" style="stop-color:#FFD808" />
<stop offset="1" style="stop-color:#FFDA
