输入框动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const racecars = Splitting({
  target: document.querySelector("#racecarLabel"),
  by: "chars" })[
0].chars;
const colors = [
"#FF0000",
"#FF7F00",
"#FFFF00",
"#00FF00",
"#00FFFF",
"#0000FF",
"#8B00FF"];

const racetrack = document.querySelector("#racetrack");

//Don't hardcode positions like this at home kids
const startPositions = [0, 11, 21, 30, 39, 47, 56];
const ease = Power2.easeInOut;
const SPEED_INCREASE = 0.35;

let pitStop = false;
let colorCount = 0;

for (let car of racecars) {
  car.carNumber = colorCount;
  car.style.color = colors[colorCount];
  colorCount++;
}

racetrack.addEventListener("focus", race);
racetrack.addEventListener("blur", () => pitStop = true);

function race() {
  const trackWidth = racetrack.clientWidth;
  const trackHeight = racetrack.clientHeight;
  pitStop = false;

for (let car of racecars) {
    car.style.position = "absolute";
    start(car, trackWidth, trackHeight);
  }
}

function start(car, tw, th) {
  TweenMax.to(car, Math.random() * 0.5 + SPEED_INCREASE, {
    x: tw + 10,
    ease,
    rotation: 360,
    onComplete: () => {
      firstTurn(car, tw, th);
    } });

}

function firstTurn(car, tw, th) {
  TweenMax.to(car, Math.random() * 0.5 + SPEED_INCREASE, {
    y: th + 20,
    ease,
    rotation: 720,
    onComplete: () => {
      longStretch(car, tw, th);
    } });

}

function longStretch(car, tw, th) {
  TweenMax.to(car, Math.random() * 0.5 + SPEED_INCREASE, {
    x: -15,
    ease,
    rotation: 1080,
    onComplete: () => {
      finalTurn(car, tw, th);
    } });

}

}

function backToStartingPosition(car) {
  TweenMax.to(car, 0.5, { x: startPositions[car.carNumber], y: 0 });
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg