使用Web Animation API实现的悬停涟漪动画

h5, web animation, api, hover

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2464
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const container = document.querySelectorAll(".box-cont");

container.forEach((element) => {
  element.addEventListener("mouseenter", function(event) {
    const element = event.target.querySelector(".box");
    const coords = getCoords(event.target.getBoundingClientRect());
    const radius = circleSize(event.target.getBoundingClientRect(), coords)

circleConstraints(element, coords, radius)
    animation(element)
  });

element.addEventListener("mouseleave", function(event) {
    const element = event.target.querySelector(".box");
    animationLeave(element);
  });
});

function getCoords(rectangle) {
  return {
    x: rectangle.width * Math.random(),
    y: rectangle.height * Math.random(),
  }
};

return Math.max(...rectCoords.map((el) => {
    const x2 = el.x;
    const y2 = el.y;
    return Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2));
  }));
}

function circleConstraints(element, coords, radius) {
  element.style.height = radius * 2 + 'px';
  element.style.width = radius * 2 + 'px';
  element.style.top = coords.y - radius + 'px';
  element.style.left = coords.x - radius + 'px';
}

编译

CSS

HTML

h5, web animation, api, hover

编辑器支持Emmet

快捷键

h5, web animation, api, hover

Web Animation API开发实例 - 涟漪动效

使用AudioContext实现的生日快乐弹奏动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：