心形爆炸效果
代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> - Exploding Low Poly Heart Container</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Cabin+Sketch");
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
height: 100vh;
background-color: #d5f3e6;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
#canvas {
height: 100vh;
width: 100vw;
}
text {
font-family: 'Cabin Sketch', cursive;
font-size: 96px;
fill: #991F1F;
text-anchor: middle;
user-select: none;
}
</style>
</head>
<body translate="no">
<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" />.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0