许秀军 2017-06-08 11:33 采纳率: 0%
浏览 848
已结题

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




盒子动画 * { 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>
  • 写回答

2条回答 默认 最新

  • 许秀军 2017-06-08 11:40
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题