酷炫的鼠标移入效果(附源码!!)
预览效果
源码(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;
}
欢迎大家关注[小白讲前端]
原文地址：https://blog.csdn.net/m0_50864141/article/details/143713432
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！