面部加载动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const loader = gsap.timeline();
const duration = 0.25;
const delay = 1;

loader
  .to(".loader-3", duration, { width: 35 })
  .set(".loader-2", { rotate: 90, transformOrigin: "45px 45px", marginLeft: 0 })
  .to(".loader-2", duration, { width: 90 })
  .set(".loader-2", { transformOrigin: "72px 17px", rotate: 270 })
  .to(".loader-2", duration, { width: 35 })
  .to(".loader-1", duration, { width: 90 })
  .set(".loader-1", { transformOrigin: "45px 17.5px", rotate: 180 })
  .to(".loader-1", duration, { width: 35 })
  .set(".loader-3", { transformOrigin: "45px 45px", rotate: 270, marginTop: 0 })
  .to(".loader-3", duration, { width: 90 })
  .set(".loader-3", { transformOrigin: "17.5px 17.5px", rotate: 90 })
  .to(".loader-3", duration, { width: 35 })
  .set(".loader-2", { transformOrigin: "45px 45px", rotate: 180 })
  .to(".loader-2", duration, { width: 90 })
  .set(".loader-2", { transformOrigin: "bottom center", marginTop: 20 })
  .to(".loader-2", duration, { width: 35 })
  .set(".loader-1", { transformOrigin: "45px 45px", rotate: 90 })
  .to(".loader-1", duration, { width: 90 })
  .set(".loader-1", { transformOrigin: "72px 17.5px", rotate: 270 })
  .to(".loader-1", duration, { width: 35 })
  .set(".loader-3", { rotate: 360 })
  .to(".loader-3", duration, { width: 90 })
  .set(".loader-3", { transformOrigin: "45px 17.5px", rotate: 180 })
  .to(".loader-3", duration, { width: 35 })
  .set(".loader-2", { transformOrigin: "45px 45px", rotate: 270, marginTop: 0 })
  .to(".loader-2", duration, { width: 90 })
  .set(".loader-2", { transformOrigin: "17.5px 17.5px", rotate: 90 })
  .to(".loader-2", duration, { width: 35 })
  .set(".loader-1", { transformOrigin: "45px 45px", rotate: 180 })
  .to(".loader-1", duration, { width: 90 })
  .set(".loader-1", { transformOrigin: "bottom center", marginTop: 20 })
  .to(".loader-1", duration, { width: 35 })
  .set(".loader-3", { transformOrigin: "45px 45px", rotate: 90 })
  .to(".loader-3", duration, { width: 90 })
  .set(".loader-3", { transformOrigin: "72px 17.5px", rotate: 270 })
  .to(".loader-3", duration, { width: 35 })
  .set(".loader-2", { transformOrigin: "45px 17.5px", rotate: 0 })
  .to(".loader-2", duration, { width: 90 })
  .set(".loader-2", { rotate: 180 })
  .to(".loader-2", duration, { width: 35 })
  .set(".loader-1", { transformOrigin: "45px 45px", rotate: 270, marginTop: 0 })
  .to(".loader-1", duration, { width: 90 })
  .set(".loader-1", { transformOrigin: "17.5px 17.5px", rotate: 90 })
  .to(".loader-1", duration, { width: 35 })
  .set(".loader-3", { transformOrigin: "45px 17.5px", rotate: 180, marginTop: 55 })
  .to(".loader-3", duration, { width: 90 })
  .set(".loader-2", { marginLeft: 55 })
  .delay(delay)
  .repeat(-1);

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