<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3 SVG猫和狗表白动画特效 - 站长素材</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg class="tramp" width="100%" height="100%" viewBox="0 0 2481 3508" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(0.830492,-0.362708,0.384808,0.881096,-72.3511,171.341)">
<rect x="699.138" y="810.067" width="834.175" height="943.87" style="fill:rgb(154,187,223);" />
</g>
<g transform="matrix(1.33768,-1.66533e-16,-5.55112e-17,1,-770.586,588.064)">
<path d="M1769.58,2107.14L955.67,2107.14L1431.24,766.67L1618.19,766.67L1769.58,2107.14Z" style="fill:rgb(217,184,165);" />
</g>
<g transform="matrix(1.33768,0,0,1,-656.233,588.064)">
<path d="M1769.58,2107.14L955.67,2107.14L1362.63,766.67L1618.19,766.67L1769.58,2107.14Z" style="fill:rgb(122,113,140);" />
</g>
<g transform="matrix(0.891947,-0.427701,0.426252,0.888927,-310.833,329.338)">
<rect x="699.138" y="810.067" width="834.175" height="943.87" style="fill:rgb(217,184,165);" />
</g>
<g transform="matrix(0.906507,-0.395906,0.400233,0.916414,-261.658,258.899)">
<rect x="699.138" y="810.067" width="834.175" height="943.87" style="fill:rgb(122,113,140);" />
</g>
<g transform="matrix(0.736075,0,0,0.736075,623.64,398.699)">
<circle cx="1568.82" cy="1298.83" r="498.405" style="fill:rgb(173,172,190);" />
</g>
<g transform="matrix(0.46213,-0.148921,0.153135,0.475207,264.223,766.091)">
<rect x="1309.38" y="1940.78" width="571.108" height="1118.66" style="fill:rgb(173,172,190);" />
</g>
<g transform="matrix(0.42975,0.0758877,-0.0225765,0.12785,1566.64,800.1)">
<rect x="506.025" y="1074.8" width="549.982" height="679.136" style="fill:rgb(154,187,223);" />
</g>
<g transform="matrix(0.873668,0.302938,-0.0425326,0.122663,1120.72,619.433)">
<rect x="506.025" y="1074.8" width="549.982" height="679.136" style="fill:rgb(122,113,140);" />
</g>
<g transform="matrix(0.744983,-0.240071,0.217114,0.673745,-237.998,1037.31)">
<rect x="1309.38" y="1940.78" width="571.108" height="1118.66" style="fill:rgb(173,172,190);" />
</g>
<g transform="matrix(0.483688,0.141564,-0.146979,0.502189,1154.1,258.505)">
<rect x="1309.38" y="1940.78" width="571.108" height="1118.66" style="fill:rgb(173,172,190);" />
</g>
<g transform="matrix(1.02679,-0.332239,0.415688,1.28469,-23.8703,-165.237)">
<circle cx="949.085" cy="1166.04" r="163.97" style="fill:rgb(173,172,190);" />
</g>
<g transform="matrix(0.246721,0.697768,-0.667915,0.236166,2116.09,-35.7701)">
<path d="M1295.16,1547.98C1351.06,1509.13 1384.14,1446.96 1384.14,1380.79C1384.14,1276 1302.27,1187.83 1193.69,1175.68L1185.76,1240.79C1259.87,1249.08 1315.76,1309.27 1315.76,1380.79C1315.76,1425.96 1293.17,1468.39 1255.02,1494.91L1295.16,1547.98Z" />
</g>
<g transform="matrix(-1.60136,-0.822464,0.787276,-1.53285,2368.67,4185.91)">
<path d="M1295.16,1547.98C1351.06,1509.13 1384.14,1446.96 1384.14,1380.79C1384.14,1356.92 1379.83,1333.24 1371.39,1310.79L1341.82,1321C1349.03,1340.17 1352.72,1360.4 1352.72,1380.79C1352.72,1437.31 1324.46,1490.41 1276.71,1523.59L1295.16,1547.98Z" />
</g>
<g transform="matrix(0.265844,1.11829,-1.07045,0.25447,3049.73,-297.087)">
<path d="M1168.7,1587.29C1287.69,1587.29 1384.14,1494.84 1384.14,1380.79C1384.14,1337.25 1369.79,1294.83 1343.13,1259.58L1317.68,1277.26C1340.45,1307.37 1352.72,1343.6 1352.72,1380.79C1352.72,1478.2 1270.33,1557.17 1168.7,1557.17L1168.7,1587.29Z" />
</g>
<g transform="matrix(0.265844,1.11829,-1.07045,0.25447,3323.89,-313.954)">
<path d="M1295.16,1547.98C1313.58,1535.17 1329.77,1519.66 1343.13,1502L1317.68,1484.32C1306.28,1499.4 1292.45,1512.65 1276.71,1523.59L1295.16,1547.98Z" />
</g>
<g transform="matrix(0.734201,-0.632764,0.563649,0.654007,-454.773,749.844)">
<rect x="926.305" y="886.965" width="247.66" height="331.169" style="fill:rgb(102,32,68);" />
</g>
<g transform="matrix(0.730446,-0.181186,0.144129,0.58105,149.794,425.956)">
<path d="M1075.82,133.269L1240.16,782.311L582.789,782.311L1075.82,133.269Z" style="fill:rgb(154,187,223);" />
</g>
<g transform="matrix(0.739154,-0.183346,0.066171,0.266766,205.53,676.373)">
<path d="M680.902,133.269L1240.16,782.311L582.789,782.311L680.902,133.269Z" style="fill:rgb(217,184,165);" />
</g>
<g transform="matrix(0.675058,-0.0990401,0.0673957,0.459369,278.514,419.779)">
<path d="M935.88,133.269L1240.16,782.311L582.789,782.311L935.88,133.269Z" style="fill:rgb(122,113,140);" />
</g>
<g transform="matrix(-0.731751,-0.107358,-0.0970982,0.661821,2238.6,94.626)">
<path d="M1098.76,133.269L1240.16,782.311L582.789,782.311L1098.76,133.269Z" style="fill:rgb(154,187,223);" />
</g>
<g transform="matrix(-0.753488,-0.110547,-0.0694161,0.47314,2228.91,244.092)">
<path d="M1075.82,133.269L1240.16,782.311L582.789,782.311L1075.82,133.269Z" style="fill:rgb(122,113,140);" />
</g>
<g transform="matrix(-0.443269,-0.0650336,-0.0310082,0.211352,1867.02,397.827)">
<path d="M1075.82,133.269L1240.16,782.311L582.789,782.311L1075.82,133.269Z" style="fill:rgb(102,32,68);" />
</g>
<g transform="matrix(1.34256,0,0,0.888889,-571.017,14.5011)">
<ellipse cx="1918.87" cy="1258.5" rx="132.581" ry="130.189" style="fill:rgb(4,0,0);" />
</g>
</svg>
<svg class="lady" width="100%" height="100%" viewBox="0 0 2481 3508" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,372.697,-256.711)">
<g transform="matrix(1,-0,-0,1,-372.697,256.711)">
<use xlink:href="#_Image1" x="1363.71" y="836.594" width="767.717px" height="1734.82px" transform="matrix(0.999631,0,0,0.999897,0,0)" />
</g>
</g>
<g transform="matrix(2.17232,0.533277,-0.587132,2.3917,-702.883,-2617.89)">
<path d="M1035.39,1526.72C1282.79,1526.72 1483.35,1326.16 1483.35,1078.75L1035.39,1078.75L1035.39,1526.72Z" style="fill:rgb(185,195,209);" />
</g>
<g transform="matrix(0.917938,0.129749,-0.158708,1.12282,557.457,-977.483)">
<rect x="794.561" y="1531.56" width="735.49" height="1530.02" style="fill:rgb(150,97,83);" />
</g>
<g transform="matrix(2.17232,0.533277,-0.57939,2.36016,-850.224,-2478.41)">
<path d="M1035.39,1526.72C1282.79,1526.72 1483.35,1326.16 1483.35,1078.75L1035.39,1078.75L1035.39,1526.72Z" style="fill:rgb(150,97,83);" />
</g>
<g transform="matrix(0.485178,0.874415,-0.775157,0.430103,2238.4,535.358)">
<rect x="753.74" y="2032.12" width="486.418" height="506.29" style="fill:rgb(213,152,152);" />
</g>
<g transform="matrix(1,0,0,1.19905,-147.367,-113.693)">
<rect x="845.354" y="1821.22" width="394.803" height="121.123" style="fill:rgb(9,112,191);" />
</g>
<g transform="matrix(0.103311,0.328267,-0.303189,0.0954185,1303.91,1773.93)">
<rect x="753.74" y="2032.12" width="486.418" height="506.29" style="fill:rgb(254,225,97);" />
</g>
<g transform="matrix(1.10487,0,0,1.02767,-105.225,-77.4259)">
<g transform="matrix(0.576334,0,0,0.602732,914.89,1015.39)">
<g transform="matrix(1,0,0,1,0,-2.09069)">
<g transform="matrix(1.38644,-1.38644,0.519916,0.519916,-1780.79,1120.25)">
<rect x="805.267" y="1530.14" width="481.904" height="481.904" style="fill:rgb(146,131,174);" />
</g>
<g transform="matrix(1.38644,1.38644,-0.519916,0.519916,474.236,-1780.79)">
<rect x="805.267" y="1530.14" width="481.904" height="481.904" style="fill:rgb(146,131,174);" />
</g>
