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

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

预览效果

源码(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;}

欢迎大家关注[小白讲前端]


http://www.mrgr.cn/news/71162.html

相关文章:

  • 多目标跟踪算法
  • 【python爬虫之 funboost 分布式函数调度框架】
  • 什么是 C++ 中的模板特化和偏特化?如何进行模板特化和偏特化?
  • 『Linux』 第四章 进程—— 进程状态讲解
  • Vue 项目中如何使用FullCalendar 时间段选择插件(类似会议室预定、课程表)
  • Qt 实现网络数据报文大小端数据的收发
  • 【Spring】Spring框架中有有哪些常见的设计模式
  • 磁集成技术给磁性材料带来哪些新要求?
  • 壁纸集 1.2.12 | 壁纸聚合软件,内置4个图片接口,超多高清壁纸
  • WTN6040FP-14S语音芯片在电梯控制板中的应用开发方案-实现楼层指引背景音乐播放功能
  • Uniapp+Vue3+Ts+Unocss实现小程序、APP、H5的大转盘抽奖效果
  • 通过注解控制是否打印日志
  • ubuntu系统没有/var/log/messages日志文件解决方法
  • vue2和vue3的原理上的区别
  • 马尔科夫链蒙特卡罗 MCMC
  • java对接微信公众号API,实现扫码关注公众号,触发多条消息回复
  • 丹摩征文活动 | 丹摩智算:大数据治理的智慧引擎与实践探索
  • UE4 Cook 从UAT传递参数给UE4Editor
  • 【使用firebase crashlytics对c层代码进行字符上传】
  • 【3D Slicer】的小白入门使用指南一
  • leetcode day10 动态规划篇 64+139
  • 初识ElasticSearch
  • AI技术助力电商转型:从挑战到未来
  • 想自己做大模型备案的企业看过来【评估测试题+备案源文件】
  • 基于C#WinForm+DevExpress项目开发实战(九)
  • Python网络爬虫简介