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

于 2024-08-19 18:49:13 发布
阅读量324 收藏 5
点赞数 5
文章标签： css javascript 计算机外设
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39327418/article/details/141231669
版权

一、过程分析

先上效果：

在这里插入图片描述

在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>
前端技术营
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery+CSS实现图片感应鼠标高亮显示当前图片
06-10
再定义一个`.highlight`类，用于给当前鼠标悬停的图片添加高亮效果，如提高图片的透明度或增加边框。 ```css .normal { opacity: 1; /* 默认全亮 */ } .highlight { opacity: 0.5; /* 变暗 */ border: 2px ...
详解CSS实现仿Windows10鼠标照亮边框效果
12-13
在本文中，我们将深入探讨如何使用CSS来实现一个仿Windows 10的鼠标照亮边框效果，这是一种在用户界面上增加交互性和动态感的设计。在Windows 10的UI中，当鼠标移动到元素上时，元素的边框会出现一个高亮区域，仿佛...
css+js实现鼠标移动边框高亮效果
W Y L
12-29 848
前言：效果是鼠标移入空白区域，边框高亮的效果。效果是在douyin的渡一教育袁老师的课程学习到的，观看以后是一个实用的小特效。想看的可以平台查询，自己也学到了知识。
知识笔记（六十五）———css+js实现鼠标移动边框高亮效果
lrx276的博客
12-30 812
效果是在douyin的渡一教育袁老师的课程学习到的，观看以后是一个实用的小特效。想看的可以平台查询，自己也学到了知识。前言：效果是鼠标移入空白区域，
html5鼠标滑过边框内外发亮,JS实现鼠标滑过显示边框的菜单效果
weixin_32683881的博客
06-04 632
本文实例讲述了JS实现鼠标滑过显示边框的菜单效果。分享给大家供大家参考，具体如下：JS鼠标滑过显示边框菜单.menulines{border:1px solid white;}.menulines a{text-decoration:none;color:red;}function borderize(what,color){what.style.borderColor=color}functio...
【前端】html+css实现鼠标悬浮变色的按钮，消除加粗边框发生抖动现象的两种方法 hover【HTML+CSS+JavaScript(JS)】
cc2855816075的博客
02-11 2635
效果： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zuoye4</title> <style type="text/css"> div{ display: inline-block; margin: 5px 10px; } input:hover{ border-color: #FF
纯JS代码实现隔行变色鼠标移入高亮
10-21
总结来说，通过纯JavaScript实现隔行变色以及鼠标移入高亮显示的交互效果是一个简单直接的过程，主要依赖于HTML、CSS和JavaScript的基本知识。在实现上述效果时，重点在于掌握JavaScript对于DOM元素的访问和操作，...
JS+CSS实现仿支付宝菜单选中效果代码
10-23
当鼠标悬停在某个菜单项上时，通过JavaScript添加一个类（比如“overa”），然后在CSS中为这个类设置特定的样式（比如改变背景图片的位置），从而实现高亮显示的效果。这种方式可以让我们在不改变HTML结构的情况下，...
效果直逼flash的Div+Css+Js菜单特效代码
03-20
标题 "效果直逼Flash的Div+Css+Js菜单特效代码" 暗示了这是一个关于创建动态、交互式网页菜单的技术教程，其中使用了HTML、CSS和JavaScript这三种核心技术。这些菜单效果通常用于提升用户体验，使得网站导航更加直观...
CSS变量的语法、特性和细节
读心悦
08-16 380
CSS变量（也称为CSS自定义属性）是一种在CSS中存储值，然后在整个文档中复用的方法。它们提供了一种强大的方式来组织和重用样式值，使得维护和更新样式变得更加容易。下面将详细介绍CSS变量的语法、特性和一些细节。
CSS的重绘和重排是什么？
沐爸的博客
08-12 1102
CSS的重绘和重排是什么？它俩有什么区别？如何对重绘和重排进行优化？快来一起看看吧！
CSS相关修改样式、伪类样式
2301_80034711的博客
08-15 994
3.background-repeat:背景图片平铺方式，值repeat重复填充，no-repeat不重复。值用空格隔开，分别设置x，y方向的相对位置。2.background-image：标签背景图片，使用url（）函数，引入文件地址。使用rgb（）函数，范围0-255，如rgb（255,255,255），分别表示红，绿，蓝。4.background-size：背景图片在标签中的大小，若图片比标签大，部分图片会缺失。3.选择器nth-child（)：通过简单数字公式，正序只更改选择器匹配中的元素。
PHP 实战：动态更改 CSS 值
withkai44的博客
08-15 207
在上面的代码中，我们首先设定了一个变量 $userFontSize 来模拟获取用户设置的字体大小，然后通过 echo 函数将 CSS 样式输出到页面中。除了直接在服务器端输出或生成 CSS 文件外，还可以结合 JavaScript 来动态更改样式。这种方式更为灵活，可以根据用户的行为实时更改样式。如果需要更改的样式较多，我们也可以选择生成一个新的 CSS 文件。直接输出 CSS 样式。生成新的 CSS 文件。
响应式Web设计：纯HTML和CSS的实现技巧
Caleb的博客
08-16 727
响应式设计的核心理念是使用灵活的布局和媒体查询来自动调整网页的布局和样式。传统的静态网页设计往往只能适应固定的屏幕尺寸，而响应式设计则能够根据用户设备的不同，自适应地调整内容展示。它允许我们为不同的屏幕尺寸和特性定义不同的CSS样式，从而实现页面的自适应布局。）在响应式设计中非常重要，因为它们可以根据不同的设备和用户设置调整元素的大小。这样，无论图片的实际尺寸如何，它都会根据其容器的宽度自动缩放，从而避免了图片溢出容器的情况。函数，使得网格项在屏幕尺寸变化时自动调整列数和列宽，从而适应不同的显示设备。
26.CSS 继承属性速查表 & 内部聚焦
粉丝们务必加入微信粉丝群
08-18 115
CSS 继承属性速查表CSS 规范明确规定了哪些 CSS 属性是继承的,但相关附录并不是最友好的资源。以下是你最有可能遇到的继承属性的快速参考:border-collapseborder-spacingcaption-sidecolorcursordirectionempty-cellsfont-familyfont-sizefont-stylefont-variantfont-weightfon...
CSS 的 position 属性
于坤
08-16 246
CSS 的position属性用于指定一个元素在文档中的定位方式。static（默认值）toprightbottomleftrelativetoprightbottomleftabsolutestaticfixedstickytoprightbottomleft。
探索tailwindcss多主题切换
xuefeng11111的博客
08-18 395
探索tailwind+css变量切换主题
html+css+js实现盒子
最新发布
qq_51415791的博客
08-19 181
【代码】html+css+js实现盒子。
写一个使用html+css+js实现小球移动的代码
06-09
好的，下面是一个使用HTML、CSS和JavaScript实现小球移动的完整代码： ```html <!DOCTYPE html> <html> <head> <title>小球移动</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); let x = canvas.width / 2; let y = canvas.height / 2; let dx = 2; let dy = -2; const ballRadius = 10; function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI * 2); ctx.fillStyle = "red"; ctx.fill(); ctx.closePath(); } function draw() { // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 画小球 drawBall(); // 移动小球 x += dx; y += dy; // 检测碰撞 if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) { dx = -dx; } if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) { dy = -dy; } requestAnimationFrame(draw); } draw(); </script> </body> </html> ``` 这个代码会在页面上画一个带有边框的画布，并在其中绘制一个小球。小球会沿着画布边缘来回移动，并在碰到边缘时反弹。可以通过修改 `dx` 和 `dy` 的值来改变小球移动的速度和方向。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值