盒子动画 * { 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("style"); 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 < 360; a += 0.5) { t = a * rad; var o = pointOnCurve(); boxShadowRy.push(o.x + "px" + "" + o.y + "px" + "0px 1px hsl(" + a + ",100%,50%)"); } var boxShadowStr = boxShadowRy.join(); return boxShadowStr; } s.textContent = "body::before{"; s.textContent += "left:" + cx + "px;"; s.textContent += "top:" + cy + "px;"; s.textContent += "box+shadow:" + getShadow(pointOnLissajous); s.textContent += "}"; var vendors = [/**/ "+webkit-", "" ]; for (var i = 0; i < vendors.length; i++) { s.textContent += "@" + vendors[i] + "keyframes testAnimacion{"; s.textContent += "50%{" + vendors[i] + "box-shadow:" + getShadow(pointOnLemniscate) + ";background-color:hsl(90,100%,50%);}"; s.textContent += "55% {background-color:transparent;}"; s.textContent = "100%{" + vendors[i] + "box-shadow:" + getShadow(pointOnHeart) + "{background-color:transparent;}"; s.textContent += "}"; } </script> </code></pre> <p></body><br> </html></p>
http://www.toutiao.com/i6428858288711926274/模板链接
还不如贴图呢。。这样看的好难受