按钮悬停效果

下载代码

html

css

分享到微信朋友圈

html

css

body {
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;overflow: hidden;background-color: #171717
}

button {
  padding: 1em 2em;
  font-size: 2em;
  border: 0px;
  transition: all 0.3s cubic-bezier(0, 1.22, 0.67, 1.17);
  border-radius: 1em;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0);
  position: relative;
  transform-style: preserve-3d;
  box-shadow: 0.5em 0.5em 1em 0 rgba(0, 0, 0, 0), 0 -3px 0 0 rgba(0, 0, 0, 0.15) inset;
  transform: scale(var(--s, 1)) rotateX(calc(((var(--y) - 50) * -1) * 0.25deg)) rotateY(calc(((var(--x) - 50)) * 0.25deg)) translateZ(var(--z, 0.1em));
}
button::before, button::after {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  content: "";
  transform: translate(-50%, -50%);
}
button::after {
  width: calc(100% + 2em);
  height: calc(100% + 2em);
}
button::before {
  background-image: linear-gradient(to right bottom, transparent 25%, rgba(255, 255, 255, 0.25), transparent 75%);
  background-size: 200% 200%;
  background-position: calc(var(--x) * 1%) calc(var(--y) * 1%);
  transform: translate(-50%, -50%);
  transition: all 0.3s cubic-bezier(0, 1.22, 0.67, 1.17);
  border-radius: inherit;
}
button.red {
  background-color: rgba(255, 125, 125, 0.5);
  color: rgba(127, 62, 62, 0.5);
}
button.green {
  background-color: rgba(0, 255, 125, 0.5);
  color: rgba(0, 127, 62, 0.5);
}
button.blue {
  background-color: rgba(0, 125, 255, 0.5);
  color: rgba(0, 62, 127, 0.5);
}
button span {
  position: relative;
  z-index: 1;
  display: block;
  transform: translateZ(0em);
  transition: all 0.3s ease-in-out;
  transform-style: preserve-3d;
}
button span::before {
  transition: all 0.3s ease-in-out;
  transform-style: preserve-3d;
  position: absolute;
  transform: translate(-1px, -1px) translateZ(0em);
  color: white;
  content: attr(data-title);
}
button:hover {
  --s: 1.05;
  --z: 1em;
  box-shadow: 0.5em 0.5em 1em 0 rgba(0, 0, 0, 0.1), 0 -3px 0 0 rgba(0, 0, 0, 0.15) inset;
}
button:hover span::before {
  transform: translate(-1px, -1px) translateZ(1em);
}

JavaScript

let y = 50;
let x = 50;

const reset = (element) => {
  y = 50;
  x = 50;
  console.log(reset);
  element.setAttribute("data-x", x);
  element.setAttribute("data-y", y);
  element.style.setProperty("--x", x);
  element.style.setProperty("--y", y);
};
const shineItUp = (element) => {
  const rect = element.getBoundingClientRect();
  const data = {
    top: rect.top,
    left: rect.left,
    bottom: rect.top + rect.height,
    right: rect.left + rect.width,
    width: rect.width,
    height: rect.height
  };

element.addEventListener("mouseout", () => {
    reset(element);
  });
  element.addEventListener("mousemove", (e) => {
    if (
      e.clientX + 20 >= data.left &&
      e.clientX - 20 <= data.right &&
      e.clientY + 20 >= data.top &&
      e.clientY - 20 <= data.bottom
    ) {
      x = Math.round((100 / data.width) * (e.clientX - data.left));
      y = Math.round((100 / data.height) * (e.clientY - data.top));
      element.setAttribute("data-x", x);
      element.setAttribute("data-y", y);
      element.style.setProperty("--x", x);
      element.style.setProperty("--y", y);
    } else {
      reset(element);
    }
  });
};

const shiners = document.querySelectorAll(".shine");
shiners.forEach((shiner) => {
  shineItUp(shiner);
});

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