JS動(dòng)畫效果，制作一個(gè)滾動(dòng)變大的圓。

JavaScript

12345678_0001 2018-09-03 12:31:44

制作一個(gè)滾動(dòng)的金幣，隨著頁面加載，完成一個(gè)兩個(gè)過程的動(dòng)畫，第一步逐漸旋轉(zhuǎn)變大，到達(dá)第一個(gè)位置后，留下一個(gè)動(dòng)畫留影，第二步繼續(xù)移動(dòng)，到達(dá)第二個(gè)位置后，留下一個(gè)動(dòng)畫留影，結(jié)束動(dòng)畫。2.我嘗試過使用定時(shí)器，判定定位的left來進(jìn)行留影，但是效果并不好，沒有流暢感，而且無法解決，逐漸旋轉(zhuǎn)變大的特效。3.截圖

查看完整描述

1 回答

慕森卡

TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超8個(gè)贊

試試這個(gè)@keyframes，這個(gè)是菜鳥教程的地址
例子如下，和他差不多吧

@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;}
}

反對(duì) 回復(fù) 2018-10-17