js特效

代码结构

1. 引入CSS

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

2. 引入JS

<script src="js/index.js"></script>

3. HTML代码

<style>
svg { background: #000 }
rect, [r], #m { fill: #fff }
</style>
<svg viewBox="-2000 -1000 4000 2000">
  <radialGradient id="r">
    <stop stop-color="#ff0" offset=".32"></stop>
    <stop stop-color="#fa0" offset=".83"></stop>
    <stop stop-color="#fa0" offset=".91"></stop>
    <stop stop-color="#000" offset=".95"></stop>
  </radialGradient>
  <filter id="f">
    <feGaussianBlur in="SourceGraphic" stdDeviation="8"></feGaussianBlur>
  </filter>
  <mask id="m">
    <path d="M500 170c200 340 820 340 780 -290c-200 0 -600 -60 -780 290" filter="url(#f)"></path>
  </mask>
  <g id="g" mask="url(#m)" filter="url(#f)">
    <rect width="2000" height="2000"></rect>
    <ellipse cx="930" cy="-70" rx="420" ry="500" fill="url(#r)"></ellipse>
    <ellipse cx="950" cy="-20" rx="200" ry="260" transform="rotate(-9 950 -20)"></ellipse>
    <circle cx="860" cy="-20" r="14"></circle>
  </g>
  <use xlink:href="#g" transform="scale(-1 1)"></use>
</svg>