心形爆炸效果-html代码-BFW代码库

心形爆炸效果

代码语言：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" point.........完整代码请登录后点击上方下载按钮下载查看