为了账号安全,请及时绑定邮箱和手机立即绑定

JS动画效果,制作一个滚动变大的圆。

/ 猿问

JS动画效果,制作一个滚动变大的圆。

牧羊人nacy 2018-09-11 21:18:56

1.制作一个滚动的金币,随着页面加载,完成一个两个过程的动画,第一步逐渐旋转变大,到达第一个位置后,留下一个动画留影,第二步继续移动,到达第二个位置后,留下一个动画留影,结束动画。
2.我尝试过使用定时器,判定定位的left来进行留影,但是效果并不好,没有流畅感,而且无法解决,逐渐旋转变大的特效。
3.截图https://img3.mukewang.com/5bae39a5000162a103150123.jpg

查看完整描述

2 回答

?
慕姐4208626

除了css3 和flash,请问还有更好的方案吗?js动画,存在大量的CPU运算和GPU,从运算开始,到每一帧的动画展示,这其中都有一个时间差,所以采用纯js的方案,肯定是不行的。推荐采用css3+js来做,另外可以搜索下关于提高css3动画流畅度的博文(非常多)

查看完整回答
反对 回复 2018-09-28
?
炎炎设计

试试这个@keyframes,这个是菜鸟教程的地址
例子如下,和他差不多吧

@keyframes myfirst

    {

    0%   {background: red; left:0px; top:0px;}

    25%  {background: yellow; left:200px; top:0px;}

    50%  {background: blue; left:200px; top:200px;}

    75%  {background: green; left:0px; top:200px;}

    100% {background: red; left:0px; top:0px;}

    }


@-webkit-keyframes myfirst /* Safari and Chrome */

    {

    0%   {background: red; left:0px; top:0px;}

    25%  {background: yellow; left:200px; top:0px;}

    50%  {background: blue; left:200px; top:200px;}

    75%  {background: green; left:0px; top:200px;}

    100% {background: red; left:0px; top:0px;}

    }


查看完整回答
反对 回复 2018-09-28

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信