CSS+JS实现一个鼠标移动的高亮边框效果

news2024/9/24 23:31:51

一、过程分析

先上效果：

在这里插入图片描述

在Windows系统里有一个很棒的细节效果，元素的渐变高亮边框是可以感知鼠标的，边框的高亮部分会跟随鼠标的移动而移动。

这种效果也是比较常见的，但是实现起来还是需要一点时间和思路的。

首先，我们先完成基础的布局。代码如下：

<div class="container">
    <div class="card">
        <div class="inner">
            <p>黄鹤楼送孟浩然之广陵</p>
            <p>唐 · 李白</p>
            <p>故人西辞黄鹤楼，烟花三月下扬州。</p>
            <p>孤帆远影碧空尽，唯见长江天际流。</p>
        </div>
    </div>
    <div class="card">
        <div class="inner">
            <p>送元二使安西</p>
            <p>唐 · 王维</p>
            <p>渭城朝雨浥轻尘，客舍青青柳色新。</p>
            <p>劝君更尽一杯酒，西出阳关无故人。</p>
        </div>
    </div>
    <div class="card">
        <div class="inner">
            <p>春日</p>
            <p>宋 · 朱熹</p>
            <p>胜日寻芳泗水滨，无边光景一时新。</p>
            <p>等闲识得东风面，万紫千红总是春。</p>
        </div>
    </div>
    <div class="card">
        <div class="inner">
            <p>小池</p>
            <p>唐 · 杨万里</p>
            <p>泉眼无声惜细流，树阴照水爱晴柔。</p>
            <p>小荷才露尖尖角，早有蜻蜓立上头。</p>
        </div>
    </div>
    <div class="card">
        <div class="inner">
            <p>村居</p>
            <p>清 · 高鼎</p>
            <p>草长莺飞二月天，拂堤杨柳醉春烟。</p>
            <p>儿童散学归来早，忙趁东风放纸鸢。</p>
        </div>
    </div>
    <div class="card">
        <div class="inner">
            <p>晓出净慈寺送林子方</p>
            <p>唐 · 杨万里</p>
            <p>毕竟西湖六月中，风光不与四时同。</p>
            <p>接天莲叶无穷碧，映日荷花别样红。</p>
        </div>
    </div>
</div>

body {
    background-color: black;
}
p {
    margin: 0;
    line-height: 2;
}
.container {
    display: grid;
    width: 100%;
    margin-top: 2rem;
    color: #f0f0f0;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: center;
}
.card {
    aspect-ratio: 4/2;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.2);
}
.inner {
    background: #222;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

接下来给 .card 加上相对定位position: relative属性，给 .inner 加上绝对定位position: absolute属性，让card盒子和inner盒子完全重叠在一起。

.card {
    aspect-ratio: 4/2;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.2);
    position: relative;
}
.inner {
    position: absolute;
    inset: 10px;
    background: #222;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

为了方便观察，给 .inner 设置 inset: 10px 属性，此属性相当于 left: 10px;top: 10px;right: 10px; bottom: 10px;。

效果如下：

在这里插入图片描述

想要实现高亮的效果，我们还需要在 .card 和 .inner 之间再插入一层，这一层是我们实现高亮的关键！这三层盒子一样大小。

在这里插入图片描述

.card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(closest-side circle, #fff, transparent);
}
.inner {
    position: absolute;
    inset: 10px;
    /* background: #222; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

为了便于观察，先把.inner的背景色去掉。效果如下：

在这里插入图片描述

看到这里有的人可能已经知道这个中间层用来干什么的了。没错，这不就是一个渐变高亮的效果嘛！我们再在 .card::before 加上一个 transform属性，同时在 .card 上加上 overflow: hidden属性，观察浏览器，神奇的效果出现了！我悟了！

.card {
    aspect-ratio: 4/2;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(closest-side circle, #fff, transparent);
    transform: translate(70px, 80px);
}
.inner {
    position: absolute;
    inset: 10px;
    background: #222;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

效果如下：

在这里插入图片描述

原来如此，一个渐变高亮的边框效果不就实现了嘛！

在这里插入图片描述

接下来就是用js代码实现 .card::before 中间层跟随鼠标移动即可。

假如图中的小圆圈为鼠标位置，当鼠标移动到此位置时，只需要计算把每张卡片中间层的中心偏移到鼠标的位置即可。那怎么去计算呢？

首先，获取到每张卡片的元素，监听鼠标移动onmousemove事件，鼠标移动时循环遍历每个卡片元素给每个卡片设置transform: translate(x, y)即可。

x(偏移的水平距离) = 鼠标离视口的水平距离 - 元素离视口的水平距离 - 元素宽度的一半。

y(偏移的垂直距离) = 鼠标离视口的垂直距离 - 元素离视口的垂直距离 - 元素高度的一半。

在这里插入图片描述

代码如下：

const container = document.querySelector('.container');
const cards = document.querySelectorAll('.card');

container.onmousemove = e => {
    for(const card of cards) {
        const rect = card.getBoundingClientRect();
        const x = e.clientX - rect.left - rect.width / 2;
        const y = e.clientY - rect.top - rect.height / 2;
        card.style.setProperty('--x', `${x}px`);
        card.style.setProperty('--y', `${y}px`);
    }
}

二、完整代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>b.html</title>
  <style type="text/css">
   body {
    background-color: black;
   }
   p {
    margin: 0;
    line-height: 2;
   }
   .container {
    display: grid;
    width: 90%;
    margin: 2rem auto 0;
    color: #f0f0f0;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: center;
   }
   .card {
    aspect-ratio: 4/2;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
   }
   .card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(closest-side circle, #fff, transparent);
    /* 偏移到看不到的地方 */
    transform: translate(var(--x, -10000px), var(--y, -10000px));
   }
   .inner {
    position: absolute;
    inset: 10px;
    background: #222;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
   }
  </style>
 </head>
 <body>
  <div class="container">
   <div class="card">
    <div class="inner">
     <p>黄鹤楼送孟浩然之广陵</p>
     <p>唐 · 李白</p>
     <p>故人西辞黄鹤楼，烟花三月下扬州。</p>
     <p>孤帆远影碧空尽，唯见长江天际流。</p>
    </div>
   </div>
   <div class="card">
    <div class="inner">
     <p>送元二使安西</p>
     <p>唐 · 王维</p>
     <p>渭城朝雨浥轻尘，客舍青青柳色新。</p>
     <p>劝君更尽一杯酒，西出阳关无故人。</p>
    </div>
   </div>
   <div class="card">
    <div class="inner">
     <p>春日</p>
     <p>宋 · 朱熹</p>
     <p>胜日寻芳泗水滨，无边光景一时新。</p>
     <p>等闲识得东风面，万紫千红总是春。</p>
    </div>
   </div>
   <div class="card">
    <div class="inner">
     <p>小池</p>
     <p>唐 · 杨万里</p>
     <p>泉眼无声惜细流，树阴照水爱晴柔。</p>
     <p>小荷才露尖尖角，早有蜻蜓立上头。</p>
    </div>
   </div>
   <div class="card">
    <div class="inner">
     <p>村居</p>
     <p>清 · 高鼎</p>
     <p>草长莺飞二月天，拂堤杨柳醉春烟。</p>
     <p>儿童散学归来早，忙趁东风放纸鸢。</p>
    </div>
   </div>
   <div class="card">
    <div class="inner">
     <p>晓出净慈寺送林子方</p>
     <p>唐 · 杨万里</p>
     <p>毕竟西湖六月中，风光不与四时同。</p>
     <p>接天莲叶无穷碧，映日荷花别样红。</p>
    </div>
   </div>
  </div>
 </body>
 <script type="text/javascript">
  const container = document.querySelector('.container');
  const cards = document.querySelectorAll('.card');
  
  container.onmousemove = e => {
   for(const card of cards) {
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;
    card.style.setProperty('--x', `${x}px`);
    card.style.setProperty('--y', `${y}px`);
   }
  }
 </script>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2053419.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

花裤衩 vue 前后端登录

花裤衩 vue 前后端登录

从官网复制地址, idea中打开打开后输入 npm i 编译下载修改配置 找到 vue.config.js打开后,找到第39行 删除代码, 把可粘贴粘上 可粘贴: proxy: { [process.env.VUE_APP_BASE_API]: { target: http://127.0.0.1:18080, changeOrigin: true, pathRewrite…
阅读更多...
使用托管竞价实例在Amazon SageMaker上运行机器学习训练

使用托管竞价实例在Amazon SageMaker上运行机器学习训练

这是本系列文章的第二篇&#xff0c;旨在通过动手实践&#xff0c;帮助大家学习亚马逊云科技的生成式AI相关技能。通过这些文章&#xff0c;大家将掌握如何利用亚马逊云科技的各类服务来应用AI技术。 那么让我们开始今天的内容吧&#xff01; 介绍 什么是Amazon SageMaker …
阅读更多...
ant design pro access.ts 是如何控制多角色的权限的

ant design pro access.ts 是如何控制多角色的权限的

ant design pro 如何去保存颜色ant design pro v6 如何做好角色管理ant design 的 tree 如何作为角色中的权限选择之一ant design 的 tree 如何作为角色中的权限选择之二 看上面的图片&#xff0c;在前端中如何控制这些权限&#xff0c;比如控制按钮的显示&#xff0c;还有菜单…
阅读更多...
Stable diffusion模型分几种？一文详解，入门必看！

Stable diffusion模型分几种？一文详解，入门必看！

在Stable Diffusion中&#xff0c;模型并不只有一种&#xff0c;不同插件有不同的模型&#xff0c;分别作用于不同的功能。今天就带大家一起来学习一下&#xff5e; 01 大模型 也就是stable diffusion模型&#xff0c;在默认界面中&#xff0c;它位于web页面的左上角&#x…
阅读更多...
[数据结构] RBTree 模拟实现RBTree

[数据结构] RBTree 模拟实现RBTree

标题&#xff1a;[数据结构] RBTree && 模拟实现RBTree 水墨不写bug 目录 一、红黑树的概念 二、map和set的封装 三、红黑树的实现 1、红黑树节点的定义 2、红黑树的结构 3、红黑树的插入 1.名称 2.插入节点的颜色 红黑树的insert 实现 情况一&#xff1a;不…
阅读更多...
微信自动化管理了解下

微信自动化管理了解下

微信作为一款广泛使用的社交软件&#xff0c;已经成为人们日常生活中不可或缺的通讯工具。不仅个人用户频繁使用&#xff0c;许多企业也依赖微信进行业务沟通和客户服务。 然而&#xff0c;对于企业用户来说&#xff0c;管理多个微信账户往往带来诸多繁琐和不便之处。这些问题…
阅读更多...
Django+anaconda

Django+anaconda

一、搭建django虚拟环境 打开anaconda prompt 输入&#xff1a;conda create -n mydjango_env 判断&#xff08;y/n&#xff09;:y 查看虚拟环境 conda env list *号表示当前使用的环境 激活创建的虚拟环境 activate mydjango_env 二、安装Django 在新环境激活的状态下安装…
阅读更多...
Nature|通过范德华层压实现三维单片集成系统 （半导体器件/集成电路）

Nature|通过范德华层压实现三维单片集成系统 （半导体器件/集成电路）

2024年5月22日，湖南大学刘渊（Yuan Liu）教授课题组，在《Nature》上发布了一篇题为“Monolithic three-dimensional tier-by-tier integration via van der Waals lamination”的论文。第一作者为湖南大学物理与微电子科学学院陆冬林(Donglin Lu)博士。论文内容如下： 一、 …
阅读更多...
Stable Diffusion 的采样器

Stable Diffusion 的采样器

一图 不推荐使用的采样器 PLMS LMS LMS Karras DPM fast DPM2 DPM2a DPM2 Karras DPM2 a Karras 可以在设置里把采样器去掉
阅读更多...
同态加密和SEAL库的介绍（十）CKKS 参数心得 2

同态加密和SEAL库的介绍（十）CKKS 参数心得 2

写在前面&#xff1a; 本篇继续上篇的测试&#xff0c;首先针对密文深度乘法情况&#xff0c;虽然密文乘法本就是应该尽量避免的&#xff08;时间和内存成本过高&#xff09;&#xff0c;更不用说深度乘法了&#xff0c;但是为了测试的完整性&#xff0c;还是做一下方便大家比对…
阅读更多...
CVE-2021-21315漏洞复现

CVE-2021-21315漏洞复现

一、基本信息 攻击机&#xff1a;kali IP:192.168.100.60 靶机&#xff1a;CentOS7 IP:192.168.100.40 二、攻击过程 下载node.js环境 wget https://nodejs.org/dist/v12.18.4/node-v12.18.4-linux-x64.tar.xz tar -xvf node-v12.18.4-linux-x64.tar.xz mv node-v12.18.4-…
阅读更多...
89.WEB渗透测试-信息收集-Google语法（3）

89.WEB渗透测试-信息收集-Google语法（3）

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;88.WEB渗透测试-信息收集-Google语法&#xff08;2&#xff09; 常用的 Google 语法的作用…
阅读更多...
【大数据平台】可扩展性设计

【大数据平台】可扩展性设计

欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;欢迎订阅相关专栏&#xff1a; 工&#x1f497;重&#x1f497;hao&#x1f497;&#xff1a;野老杂谈 ⭐️ 全网最全IT互联网公司面试宝典&#xff1a;收集整理全网各大IT互联网公司技术、项目、HR面试真题.…
阅读更多...
线程间同步的概念

线程间同步的概念

一、线程间同步的概念 rtthread通过线程间同步建立线程间的执行顺序&#xff0c;多个线程访问的同一个内存叫做临界区。rtthread提供的同步的工具 1、信号量 2、互斥量 3、事件集 二、信号量 2.1 信号量概念 rtthread将信号量抽象成rt_semaphore. 2.2 信号量api 2.3 信号量示例…
阅读更多...
本地Docker部署开源Web相册图库Piwigo与在线远程访问实战方案

本地Docker部署开源Web相册图库Piwigo与在线远程访问实战方案

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
【leetcode详解】T3137（思路详解 代码优化感悟)

【leetcode详解】T3137（思路详解 代码优化感悟)

思路详解 要解决这个问题&#xff0c;我们的大致思路是这样&#xff1a;找到长度为k的字符串 (记为stringA) &#xff0c;统计重复次数最多的那一个&#xff0c;则最终对应的k周期字符串就是 [stringA * n] 的形式( n word.length() / k&#xff09; 要实现多对象的计数&…
阅读更多...
【数据结构】关于Java对象比较，以及优先级队列的大小堆创建你了解多少？？？

【数据结构】关于Java对象比较，以及优先级队列的大小堆创建你了解多少？？？

前言&#xff1a; &#x1f31f;&#x1f31f;Hello家人们&#xff0c;这期讲解对象的比较&#xff0c;以及优先级队列堆&#xff0c;希望你能帮到屏幕前的你。 &#x1f308;上期博客在这里&#xff1a;http://t.csdnimg.cn/MSex7 &#x1f308;感兴趣的小伙伴看一看小编主页&…
阅读更多...
分享一个基于SpringBoot的物品代购系统的设计与实现（源码、调试、LW、开题、PPT）

分享一个基于SpringBoot的物品代购系统的设计与实现（源码、调试、LW、开题、PPT）

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人 八年开发经验&#xff0c;擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等&#xff0c;大家有这一块的问题可以一起交流&…
阅读更多...
从零开始学嵌入式技术之数字电路

从零开始学嵌入式技术之数字电路

一&#xff1a;数字电路基础 数字电路是现代科技和工程领域中不可或缺的基础。从计算机系统到通信设备&#xff0c;从家庭电子产品到工业自动化&#xff0c;数字电路无处不在&#xff0c;影响着我们的生活和工作。本章节旨在向读者介绍数字电路的基本概念、原理和应用&#xff…
阅读更多...
迭代器失效

迭代器失效

一、什么是迭代器失效 迭代器的主要作用就是让算法能够不用关心底层数据结构&#xff0c;其底层实际就是一个指针&#xff0c;或者是对指针进行了封装&#xff0c;比如&#xff1a;vector的迭代器就是原生态指针T* 。因此迭代器失效&#xff0c;实际就是迭代器底层对应指针所指…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023