按钮点击动画

下载代码

html

css

分享到微信朋友圈

html

css

@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&display=swap");
:root {
  --mouse-x: -50px;
  --mouse-y: -50px;
  --mouse-btn-x: -50px;
  --mouse-btn-y: -50px;
}

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  font-size: 14px;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: "Comfortaa", cursive;
  background-color: #A8CAF5;
  font-weight: 400;
}

.svg-background {
  position: absolute;
  left: -20vw;
  right: -20vw;
  bottom: 0;
  width: 140vw;
}

a {
  color: #7f71fe;
  text-decoration: none;
  font-weight: 700;
}

.btn {
  appearance: none;
  outline: 0;
  position: relative;
  overflow: hidden;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: none;
  letter-spacing: 3px;
  line-height: 80px;
  height: 80px;
  width: 300px;
  padding: 0 30px;
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  background-color: #1A1D2C;
  border-radius: 5px;
  transition: all 0.3s ease-in;
}
.btn_text {
  position: relative;
  z-index: 2;
}
.btn:hover {
  background-color: #262c48;
}

.link {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 18px;
}
.link svg {
  position: relative;
  top: 5px;
  margin: 0 4px;
}

.mover {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  left: var(--mouse-x);
  top: var(--mouse-y);
  height: 20px;
  width: 20px;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.5);
  transition: all 0.1s ease-out;
  z-index: 1;
}
.mover.active {
  transform: scale(0.8);
}

.mouse {
  pointer-events: none;
  height: 30px;
  width: 30px;
  position: absolute;
  left: var(--mouse-btn-x);
  top: var(--mouse-btn-y);
}
.mouse .svg {
  position: absolute;
  width: 160px;
  height: 180px;
  top: -110px;
  left: -80px;
}

JavaScript

let root = document.documentElement;
let mover = document.querySelector(".mover");
let link = document.querySelector(".btn");

root.addEventListener("mousemove", (e) => {
	root.style.setProperty("--mouse-x", e.clientX + "px");
	root.style.setProperty("--mouse-y", e.clientY + "px");
});

link.addEventListener("click", function (event) {
	event.preventDefault();
	let svg =
		`<svg class="svg" fill="none" viewBox="0 0 140 160" xmlns="http://www.w3.org/2000/svg"> <path d="M70.5 82.5V45.5" id="Line1"></path> <path d="M61.5 90.5L24.5 90.5" id="Line2"></path> <path d="M70.5 100.5V137.5" id="Line3"></path> <path d="M79.5 90.5L116.5 90.5" id="Line4"></path> <path d="M64.8786 85.9999L38.7157 59.8369" id="Line5"></path> <path d="M76 85.8788L102.163 59.7158" id="Line6"></path> <path d="M64 97.1211L37.837 123.284" id="Line7"></path> <path d="M76.1213 97L102.284 123.163" id="Line8"></path>  <g> <g> <g class="svg_obj"> <path d="M14.6324 5.25L20.9832 16.25C21.5606 17.25 20.8389 18.5 19.6842 18.5H6.98249C5.82778 18.5 5.10609 17.25 5.68344 16.25L12.0343 5.25C12.6116 4.25 14.055 4.25 14.6324 5.25Z" fill="none" stroke-linecap="square" stroke-linejoin="round" stroke-width="3" stroke="#7f71fe"></path> </g> <animateMotion begin="0s" dur="1.5s" repeatCount="1"> <mpath xlink:href="#Line` +
		Math.floor(Math.random() * 8 + 1) +
		`"></mpath> </animateMotion> </g> </g> <g> <g> <g class="svg_obj"> <circle cx="12" cy="11" r="6.5" stroke-width="3" stroke="#1A3AF8"></circle> </g> <animateMotion begin="0s" dur="1.5s" repeatCount="1"> <mpath xlink:href="#Line` +
		Math.floor(Math.random() * 8 + 1) +
		`"></mpath> </animateMotion> </g> </g> <g> <g> <g class="svg_obj"> <path d="M17.2394 3L7.6162 18.2116M5 5.51355L20.2116 15.1367" stroke="#47cf73" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/> </g> <animateMotion begin="0s" dur="1.5s" repeatCount="1"> <mpath xlink:href="#Line` +
		Math.floor(Math.random() * 8 + 1) +
		`"></mpath> </animateMotion> </g> </g> </svg>`;

let x = event.offsetX == undefined ? event.layerX : event.offsetX,
		y = event.offsetY == undefined ? event.layerY : event.offsetY;

let span = document.createElement("span");
	span.className = "mouse";
	span.innerHTML = svg;
	s = span.style;
	s.top = y + "px";
	s.left = x + "px";
	this.appendChild(span);

setTimeout(function () {
		span.remove();
	}, 1400);

mover.classList.add("active");
	setTimeout(function () {
		mover.classList.remove("active");
	}, 250);
});

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