JS完全按照模板来的，编译没错，每一步都能运行，但就是不出动画

Question

盒子动画 * { padding: 0; margin: 0; } body { height: 100%; font-size: 16px; background-color: black; } body::before { content: ""; width: 2px; height: 2px; border-radius: 50%; position: absolute; background-color: hsl(90, 100%, 50%); -webkit-animation: testAnimacion 5s ease-in-out infinite alternate-reverse; animation: testAnimacion 5s ease-in-out infinite alternate-reverse; }

<pre><code> var s = document.createElement(&quot;style&quot;); document.head.appendChild(s); var cx = window.innerWidth / 2; var cy = window.innerHeight / 2; var rad = Math.PI / 180; var R = 150, r = R / 16, kx = 5, ky = 6, phi = Math.PI / 2, x, y, t; function pointOnLemniscate() { (x = (R * Math.cos(t) / (1 + Math.sin(t) * Math.sin(t))) .toFixed(5)), (y = (R * Math.sin(t) * Math.cos(t) / (1 + Math.sin(t) * Math.sin(t))).toFixed(5)); return (o = { x : x, y : y }); } function pointOnLissajous() { x = (R * Math.sin(kx * t + phi)).toFixed(5); y = (R * Math.sin(ky * t)).toFixed(5); return (o = { x : x, y : y }); } function pointOnHeart() { x = (16 * r * (Math.sin(t) * Math.sin(t) * Math.sin(t))).toFixed(5); y = (-13 * r * Math.cos(t) + 5 * r * Math.cos(2 * t) + r * Math.cos(4 * t)).toFixed(5); return (o = { x : x, y : y }); } function getShadow(pointOnCurve) { var boxShadowRy = []; for (var a = 0; a &lt; 360; a += 0.5) { t = a * rad; var o = pointOnCurve(); boxShadowRy.push(o.x + &quot;px&quot; + &quot;&quot; + o.y + &quot;px&quot; + &quot;0px 1px hsl(&quot; + a + &quot;,100%,50%)&quot;); } var boxShadowStr = boxShadowRy.join(); return boxShadowStr; } s.textContent = &quot;body::before{&quot;; s.textContent += &quot;left:&quot; + cx + &quot;px;&quot;; s.textContent += &quot;top:&quot; + cy + &quot;px;&quot;; s.textContent += &quot;box+shadow:&quot; + getShadow(pointOnLissajous); s.textContent += &quot;}&quot;; var vendors = [/**/ &quot;+webkit-&quot;, &quot;&quot; ]; for (var i = 0; i &lt; vendors.length; i++) { s.textContent += &quot;@&quot; + vendors[i] + &quot;keyframes testAnimacion{&quot;; s.textContent += &quot;50%{&quot; + vendors[i] + &quot;box-shadow:&quot; + getShadow(pointOnLemniscate) + &quot;;background-color:hsl(90,100%,50%);}&quot;; s.textContent += &quot;55% {background-color:transparent;}&quot;; s.textContent = &quot;100%{&quot; + vendors[i] + &quot;box-shadow:&quot; + getShadow(pointOnHeart) + &quot;{background-color:transparent;}&quot;; s.textContent += &quot;}&quot;; } &lt;/script&gt; </code></pre> <p></body><br> </html></p>

Answer 1

http://www.toutiao.com/i6428858288711926274/模板链接