花瓣特效

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const $petals = document.querySelectorAll('.petal');
let color = 0;
const mouse = {
  x: 1,
  y: 1 };

const handleMouse = e => {
  const x = e.clientX || e.touches[0].clientX;
  const y = e.clientY || e.touches[0].clientY;
  mouse.x = x / window.innerWidth;
  mouse.y = y / window.innerHeight;
};
['mousemove', 'touchstart', 'touchmove'].forEach(e => window.addEventListener(e, handleMouse));

const lerp = (a, b, n) => (1 - n) * a + n * b;

Object.assign(b.style, style);
    b.style.setProperty('--color', `hsl(${Math.floor(color)}, 60%, 50%)`);
  });
  requestAnimationFrame(animate);
};
animate();

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