HTML5打碎爱心3D动画特效代码下载


HTML5打碎爱心3D动画特效代码下载
HTML5打碎爱心3D动画特效代码下载以及打碎爱心、3D动画等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src='js/TweenMax.min.js'></script>
<script src='js/DrawSVGPlugin.min.js'></script>
<script src="js/script.js"></script>

3. HTML代码

<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="">Click Me!</text>
  <g id="heart" filter="url(#blur)">
    <polygon fill="#D04646" points="1261.5,596.5 1258.5,807.5 1132.5,524.5 	"/>
    <polygon fill="#C93B3B" points="1261.5,596.5 1388.5,524.5 1258.5,807.5 	"/>
    <polygon fill="#E46565" points="1261.5,596.5 1266.5,447.5 1132.5,524.5 	"/>
    <polygon fill="#E46666" points="1266.5,447.5 1388.5,524.5 1261.5,596.5 	"/>
    <polygon fill="#DE5C5C" points="1266.5,447.5 1414.5,411.5 1388.5,524.5 	"/>
    <polygon fill="#DB5757" points="1266.5,447.5 1379.5,315.5 1414.5,411.5 	"/>
    <polygon fill="#CD4040" points="1414.5,411.5 1530.5,233.5 1379.5,315.5 	"/>
    <polygon fill="#BD2828" points="1414.5,411.5 1597.5,346.5 1530.5,233.5 	"/>
    <polygon fill="#A72121" points="1597.5,346.5 1749.5,262.5 1530.5,233.5 	"/>
    <polygon fill="#991F1F" points="1597.5,346.5 1703.5,401.5 1749.5,262.5 	"/>
    <polygon fill="#9F2020" points="1597.5,346.5 1707.5,486.5 1703.5,401.5 	"/>
    <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>

相关推荐

发表评论

相关文章