<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>基于TweenMax的HTML5 3D爱心破裂动画DEMO演示</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <svg version="1.1" id="canvas" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 1440"> <defs> <filter id="blur" x="-150%" y="-150%" width="280%" height="280%" color-interpolation-filters="sRGB"> <feGaussianBlur id="gBlur" in="SourceGraphic" stdDeviation="0" /> </filter> </defs> <text id="text" x="1250" y="770" style="">敲一下页面可以重组破碎的爱心</text> <g id="heart" filter="url(#blur)"> <polygon fill="#7A1C1C" points="1749.5,262.5 1875.5,420.5 1707.5,486.5 1703.5,401.5 "/> <polygon fill="#6A1A1A" points="1707.5,486.5 1891.5,605.5 1875.5,420.5 "/> <polygon fill="#761C1C" points="1707.5,486.5 1717.5,740.5 1891.5,605.5 "/> <polygon fill="#5E1919" points="1717.5,740.5 1839.5,824.5 1891.5,605.5 "/> <polygon fill="#901E1E" points="1707.5,486.5 1570.5,589.5 1609.5,733.5 1717.5,740.5 "/> <polygon fill="#851D1D" points="1609.5,733.5 1508.5,930.5 1717.5,740.5 "/> <polygon fill="#5E1919" points="1508.5,930.5 1652.5,997.5 1839.5,824.5 1717.5,740.5 "/> <polygon fill="#9A1F1F" points="1609.5,733.5 1258.5,807.5 1508.5,930.5 "/> <polygon fill="#7E1D1D" points="1258.5,807.5 1261.5,1043.5 1508.5,930.5 "/> <polygon fill="#611919" points="1261.5,1043.5 1445.5,1081.5 1652.5,997.5 1508.5,930.5 "/> <polygon fill="#5E1919" points="1261.5,1043.5 1267.5,1192.5 1445.5,1081.5 "/> <polygon fill="#5E1919" points="1261.5,1043.5 1086.5,1081.5 1267.5,1192.5 "/> <polygon fill="#5E1919" points="1261.5,1043.5 1016.5,930.5 880.5,995.5 1086.5,1081.5 "/> <polygon fill="#851D1D" points="1258.5,807.5 1016.5,930.5 1261.5,1043.5 "/> <polygon fill="#821D1D" points="1016.5,930.5 805.5,736.5 914.5,733.5 "/> <polygon fill="#981F1F" points="914.5,733.5 1258.5,807.5 1016.5,930.5 "/> <polygon fill="#5E1919" points="694.5,824.5 880.5,995.5 1016.5,930.5 805.5,736.5 "/> <polygon fill="#5E1919" points="694.5,824.5 641.5,598.5 805.5,736.5 "/> <polygon fill="#721B1B" points="641.5,598.5 819.5,486.5 805.5,736.5 "/> <polygon fill="#951F1F" points="819.5,486.5 953.5,589.5 914.5,733.5 805.5,736.5 "/> <polygon fill="#681A1A" points="658.5,416.5 641.5,598.5 819.5,486.5 "/> <polygon fill="#C43232" points="1132.5,524.5 1258.5,807.5 914.5,733.5 953.5,589.5 "/> <polygon fill="#C73737" points="1132.5,524.5 1109.5,416.5 953.5,589.5 "/> <polygon fill="#DE5C5C" points="1109.5,416.5 1132.5,524.5 1266.5,447.5 "/> <polygon fill="#D95555" points="1109.5,416.5 1153.5,315.5 1266.5,447.5 "/> <polygon fill="#CB3D3D" points="1109.5,416.5 998.5,233.5 1153.5,315.5 "/> <polygon fill="#C02C2C" points="1109.5,416.5 926.5,346.5 998.5,233.5 "/> <polygon fill="#B42222" points="926.5,346.5 819.5,486.5 953.5,589.5 1109.5,416.5 "/> <polygon fill="#9E2020" points="926.5,346.5 779.5,263.5 998.5,233.5 "/> <polygon fill="#891E1E" points="779.5,263.5 826.5,401.5 926.5,346.5 "/> <polygon fill="#9E2020" points="826.5,401.5 819.5,486.5 926.5,346.5 "/> <polygon fill="#741B1B" points="779.5,263.5 658.5,416.5 819.5,486.5 826.5,401.5 "/> <polygon fill="#C02C2C" points="1388.5,524.5 1570.5,589.5 1609.5,733.5 1258.5,807.5 "/> <polygon fill="#C73737" points="1414.5,411.5 1570.5,589.5 1388.5,524.5 "/> <polygon fill="#BA2323" points="1414.5,411.5 1597.5,346.5 1707.5,486.5 1570.5,589.5 "/> </g> <g id="container" filter="url(#blur)"> <polygon fill="#FAAC37" points="1364.5,263.5 1379.5,315.5 1266.5,447.5 "/> <polygon fill="#FAA92F" points="1346.5,233.5 1364.5,263.5 1266.5,393.5"/> <polygon fill="#F9B64C" points="1364.5,263.5 1266.5,393.5 1266.5,447.5"/> <polygon fill="#FAAC36" points="1184.5,233.5 1266.5,393.5 1159.5,263.5"/> <polygon fill="#F9B447" points="1159.5,263.5 1153.5,315.5 1266.5,447.5"/> <polygon fill="#F9B447" points="1159.5,263.5 1266.5,447.5 1266.5,393.5"/> <polygon fill="#FBA222" points="1364.5,263.5 1530.5,172.5 1530.5,233.5 1379.5,315.5"/> <polygon fill="#FC990F" points="1364.5,263.5 1346.5,233.5 1526.5,106.5 1530.5,172.5"/> <polygon fill="#BD6809" points="1526.5,106.5 1763.5,89.5 1732.5,172.5 1530.5,172.5"/> <polygon fill="#E88A0D" points="1530.5,172.5 1530.5,233.5 1749.5,262.5 1732.5,172.5"/> <polygon fill="#682602" points="1763.5,89.5 1959.5,204.5 1900.5,271.5 1732.5,172.5"/> <polygon fill="#BC6809" points="1732.5,172.5 1749.5,262.5 1900.5,271.5 "/> <polygon fill="#571900" points="1959.5,204.5 2074.5,369.5 2016.5,411.5 1900.5,271.5"/> <polygon fill="#B66309" points="1749.5,262.5 1875.5,420.5 2016.5,411.5 1900.5,271.5"/> <polygon fill="#401000" points="2074.5,369.5 2100.5,589.5 2016.5,599.5 2016.5,411.5"/> <polygon fill="#B96509" points="2016.5,411.5 1875.5,420.5 1891.5,605.5 2016.5,599.5"/> <polygon fill="#B56209" points="1891.5,605.5 1839.5,824.5 1965.5,781.5 2016.5,599.5"/> <polygon fill="#4D1500" points="2100.5,589.5 2031.5,803.5 1965.5,781.5 2016.5,599.5"/> <polygon fill="#A35407" points="1965.5,781.5 1839.5,937.5 1839.5,824.5"/> <polygon fill="#571900" points="2032.5,803.5 1881.5,966.5 1839.5,937.5 1965.5,781.5"/> <polygon fill="#A85807" points="1839.5,824.5 1839.5,937.5 1652.5,997.5"/> <polygon fill="#8F4405" points="1652.5,997.5 1662.5,1058.5 1839.5,937.5"/> <polygon fill="#401000" points="1662.5,1058.5 1692.5,1081.5 1881.5,966.5 1839.5,937.5"/> <polygon fill="#A75707" points="1652.5,997.5 1445.5,1081.5 1485.5,1130.5 1662.5,1058.5"/> <polygon fill="#5E1E01" points="1662.5,1058.5 1692.5,1081.5 1508.5,1149.5 1485.5,1130.5"/> <polygon fill="#571900" points="1360.5,1211.5 1267.5,1296.5 1369.5,1252.5"/> <polygon fill="#944806" points="1445.5,1081.5 1267.5,1192.5 1360.5,1211.5"/> <polygon fill="#692702" points="1267.5,1192.5 1267.5,1296.5 1360.5,1211.5"/> <polygon fill="#401200" points="1369.5,1252.5 1267.5,1379.5 1267.5,1296.5"/> <polygon fill="#944806" points="1267.5,1192.5 1167.5,1211.5 1267.5,1296.5"/> <polygon fill="#571900" points="1267.5,1296.5 1159.5,1252.5 1267.5,1379.5"/> <polygon fill="#A05207" points="1167.5,1211.5 1267.5,1296.5 1159.5,1252.5"/> <polygon fill="#D3790B" points="1167.5,1211.5 1086.5,1081.5 1267.5,1192.5"/> <polygon fill="#ED8D0E" points="1043.5,1130.5 1086.5,1081.5 1167.5,1211.5"/> <polygon fill="#CD750B" points="1043.5,1130.5 1159.5,1252.5 1167.5,1211.5"/> <polygon fill="#DA7F0C" points="1043.5,1130.5 1029.5,1154.5 1159.5,1252.5"/> <polygon fill="#FB9F1B" points="880.5,995.5 1086.5,1081.5 1043.5,1130.5 865.5,1058.5"/> <polygon fill="#FA970F" points="865.5,1058.5 849.5,1081.5 1029.5,1154.5 1043.5,1130.5"/> <polygon fill="#FBA425" points="880.5,995.5 694.5,935.5 865.5,1058.5 "/> <polygon fill="#FBA11F" points="694.5,935.5 653.5,963.5 849.5,1081.5 865.5,1058.5"/> <polygon fill="#F9B74D" points="694.5,935.5 694.5,824.5 880.5,995.5"/> <polygon fill="#F7C76E" points="694.5,824.5 563.5,779.5 694.5,935.5"/> <polygon fill="#F8C264" points="563.5,779.5 504.5,801.5 653.5,963.5 694.5,935.5"/> <polygon fill="#662501" points="1508.5,1149.5 1369.5,1252.5 1485.5,1130.5 "/> <polygon fill="#A05207" points="1445.5,1081.5 1485.5,1130.5 1360.5,1211.5 "/> <polygon fill="#571900" points="1360.5,1211.5 1369.5,1252.5 1485.5,1130.5 "/> <polygon fill="#F5D995" points="563.5,779.5 511.5,598.5 641.5,598.5 694.5,824.5"/> <polygon fill="#F6D286" points="511.5,598.5 437.5,589.5 504.5,801.5 563.5,779.5"/> <polygon fill="#F5D995" points="437.5,589.5 459.5,370.5 515.5,408.5 511.5,598.5"/> <polygon fill="#F4E2A6" points="515.5,408.5 658.5,418.5 641.5,598.5 511.5,598.5"/> <path fill="none" stroke="#0D0D0D" stroke-linejoin="round" stroke-miterlimit="10" d="M515.5,408.5L515.5,408.5L515.5,408.5z"/> <polygon fill="#F6D388" points="515.5,408.5 515.5,408.5 629.5,271.5 779.5,263.5 658.5,418.5"/> <polygon fill="#F7C367" points="629.5,271.5 571.5,205.5 459.5,370.5 515.5,408.5"/> <polygon fill="#F9B54A" points="571.5,205.5 769.5,92.5 793.5,172.5 629.5,271.5"/> <polygon fill="#F8BD59" points="793.5,172.5 779.5,263.5 629.5,271.5"/> <polygon fill="#FBA527" points="769.5,92.5 769.5,92.5 1006.5,106.5 993.5,172.5 793.5,172.5"/> <polygon fill="#F9B952" points="993.5,172.5 998.5,233.5 779.5,263.5 793.5,172.5"/> <polygon fill="#FBA427" points="1006.5,106.5 1006.5,106.5 1184.5,233.5 1159.5,263.5 993.5,172.5"/> <polygon fill="#F9B345" points="993.5,172.5 998.5,233.5 1153.5,315.5 1159.5,263.5"/> </g> </svg> <script src='js/TweenMax.min.js'></script> <script src='js/DrawSVGPlugin.min.js'></script> <script src="js/script.js"></script> </body> </html>
基于TweenMax的HTML5 3D爱心破裂动画
标签：
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论
上一篇：
纯CSS3骏马奔腾动画特效