当前位置：首页 > news >正文

酷炫的鼠标移入效果(附源码!!)

news 2024/11/14 11:00:29

预览效果

源码(html+js部分)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./html.css"></head><body><div class="card"><div class="glow"></div><h1>01</h1><p>让鼠标光标跟着走.</p></div><div class="card"><div class="glow"></div><h1>02</h1><p>让鼠标光标跟着走.</p></div><div class="card"><div class="glow"></div><h1>03</h1><p>让鼠标光标跟着走.</p></div><script>const cards = document.querySelectorAll(".card");cards.forEach((card) => {card.addEventListener("mousemove", handleMouseMove);});function handleMouseMove(e) {const rect = this.getBoundingClientRect();const mouseX = e.clientX - rect.left - rect.width / 2;const mouseY = e.clientY - rect.top - rect.height / 2;let angle = Math.atan2(mouseY, mouseX) * (180 / Math.PI);angle = (angle + 360) % 360;this.style.setProperty("--start", angle + 60);}</script>
</body></html>

css 源码(创建一个home.css的文件)

 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;600&family=Poppins:wght@400;500&display=swap");* {margin: 0;padding: 0;box-sizing: border-box;font-family: "Poppins", sans-serif;}:root {--gradient: conic-gradient(from 90deg at 50% 50%,rgb(251, 55, 60),rgba(252, 114, 28, 1),rgba(255, 220, 0, 1),rgba(27, 206, 255, 1),rgba(42, 107, 255, 1),rgba(217, 41, 255, 1),rgba(255, 10, 92, 1));}body {position: relative;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #0f0f0f;padding: 20px 0;}.card {--start: 0;position: relative;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;width: 280px;height: 350px;margin: 10px;padding: 10px 40px;background-color: #040404;border-radius: 14px;transition: border-color 0.3s ease-in-out;}.card::before {position: absolute;content: "";width: 100%;height: 100%;left: 50%;top: 50%;transform: translate(-50%, -50%);border-radius: 14px;border: 2px solid transparent;background: var(--gradient);background-attachment: fixed;mask: linear-gradient(#0000, #0000),conic-gradient(from calc((var(--start) - (20 * 1.1)) * 1deg),#ffffff1f 0deg,white,#ffffff00 100deg);mask-composite: intersect;mask-clip: padding-box, border-box;opacity: 0;transition: 0.5s ease;}.glow {pointer-events: none;position: absolute;width: 100%;height: 100%;left: 50%;top: 50%;transform: translate(-50%, -50%);filter: blur(14px);}.glow::before {position: absolute;content: "";width: 98%;height: 98%;left: 50%;top: 50%;transform: translate(-50%, -50%);border-radius: 14px;border: 15px solid transparent;background: var(--gradient);background-attachment: fixed;mask: linear-gradient(#0000, #0000),conic-gradient(from calc((var(--start) - (20 * 1.1)) * 1deg),#ffffff1f 0deg,white,#ffffff00 100deg);mask-composite: intersect;mask-clip: padding-box, border-box;opacity: 0;transition: 1s ease;}.card:hover>.glow::before {opacity: 1;}.card:hover::before {opacity: 0.6;}h1 {font-size: 65px;color: rgb(71, 71, 71);text-align: center;font-weight: 600;}p {font-size: 20px;color: rgb(174, 174, 174);font-weight: 600;}