css+js实现鼠标移动边框高亮效果

前言:效果是鼠标移入空白区域,边框高亮的效果。效果是在douyin的渡一教育袁老师的课程学习到的,观看以后是一个实用的小特效。想看的可以平台查询,自己也学到了知识。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background: #000;}.card-wrap {display: grid;margin: 0 auto;width: 90%;margin-top: 1em;color: #f0f0f0;grid-template-columns: repeat(3, 1fr);gap: 20px;text-align: center;}.card {aspect-ratio: 4/3;border-radius: 8px;background-color: rgba(255, 255, 255, .1);position: relative;overflow: hidden;}.card .inner {position: absolute;inset: 2px;background-color: #222;border-radius: inherit;display: flex;align-items: center;justify-content: center;z-index: 3;}.card::before {content: "";position: absolute;z-index: 2;top: 0;left: 0;inset: 0;background: radial-gradient(closest-side circle, rgba(255, 255, 255, 0.6) 0%, transparent);border-radius: inherit;transform: translate(var(--x, -1000px), var(--y, -1000px));}</style>
</head>
<body><div class="card-wrap"><div class="card"><div class="inner">wish you every success</div></div><div class="card"><div class="inner">wish you every success</div></div><div class="card"><div class="inner">wish you every success</div></div><div class="card"><div class="inner">wish you every success</div></div><div class="card"><div class="inner">wish you every success</div></div><div class="card"><div class="inner">wish you every success</div></div></div><script>const cardWrapEl = document.querySelector(".card-wrap")const cardEls = document.querySelectorAll(".card")cardWrapEl.onmousemove = function (e) {for (const card of cardEls) {// getBoundingClientRect提供了元素的大小及其相对于视口的位置。const react = card.getBoundingClientRect()const x = e.clientX - react.left - react.width / 2const y = e.clientY - react.top - react.height / 2card.style.setProperty('--x', `${x}px`)card.style.setProperty('--y', `${y}px`)}}</script>
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣:968. 监控二叉树(贪心,二叉树)

题目&#xff1a; 给定一个二叉树&#xff0c;我们在树的节点上安装摄像头。 节点上的每个摄影头都可以监视其父对象、自身及其直接子对象。 计算监控树的所有节点所需的最小摄像头数量。 示例 1&#xff1a; 输入&#xff1a;[0,0,null,0,0] 输出&#xff1a;1 解释&…

英语中修饰头发的形容词顺序是怎么样的(加补充)

一、英语描述发型 :漂亮长短形状颜色头发。 例如她有一头美丽的黑色的直发。She has beautiful long straight black hair.二、多个形容词修饰同一名词时的顺序是固定的&#xff0c;其顺序为&#xff1a;①冠词、指示代词、不定代词、物主代词②序数词基数词③一般性描绘形容词…

电子工程师如何接私活赚外快?

对电子工程师来说&#xff0c;利用业余时间接私活是个很常见的技术&#xff0c;不仅可以赚取额外收入&#xff0c;也能提升巩固技术&#xff0c;可以说国内十个工程师&#xff0c;必有五个在接私活养家糊口&#xff0c;如果第一次接私活&#xff0c;该如何做&#xff1f; 很多工…

视频遥测终端机的设计需求

目录 1.目的 2.参考文件 3.总体描述 4.硬件资源描述 4.1微控制单元 4.2视频处理单元 4.3性能指标 5.功能要求 5.1系统参数要求 5.1.1系统管理 5.1.2系统配置 5.1.2.1一般参数 5.1.2.2编码参数 5.1.2.3网络参数 5.1.2.4网络服务 5.1.2.5OSD参数 5.1.2.6抓拍 5.…

AQS(抽象队列同步器)

AQS 简介基本框架1、AQS框架介绍2、AQS核心成员变量和方法 源码分析1、CLH队列(FIFO)2、独占模式获取资源2.1、acquire(int)2.1.1、tryAcquire(int arg)2.1.2、addWaiter(Node mode)2.1.3、acquireQueued(final Node node, int arg)2.1.3.1、shouldParkAfterFailedAcquire(p, n…

记一次redis内存没满发生key逐出的情况。

现象&#xff1a; 从监控上看&#xff0c;redis的内存使用率最大是80%&#xff0c;但是发生了key evicted 分析&#xff1a; 原因1、可能是阿里云监控没抓取到内存100%监控数据。 阿里控制台监控监控粒度是5秒。 内存使用率的计算方法。 used_memory_human/maxmemory 原因2、…

Unity Shader 实现X光效果

Unity Shader 实现X光效果 Unity Shader 实现实物遮挡外轮廓发光效果第五人格黎明杀机火炬之光 实现方案操作实现立体感优化总结源码 Unity Shader 实现实物遮挡外轮廓发光效果 之前看过《火炬之光》、《黎明杀机》、《第五人格》等不少的游戏里面人物被建筑物遮挡呈现出不同的…

一起玩儿物联网人工智能小车(ESP32)——13. 用ESP32的GPIO控制智能小车运动起来(一)

摘要&#xff1a;本文更深入的讲述了GPIO的相关知识&#xff0c;并完成了导线连接工作&#xff0c;为下一步的软件开发做好了准备。 通用输入输出端口&#xff08;GPIO&#xff1a;General Purpose Input/Output Port&#xff09;&#xff0c;在前面已经有了初步的介绍&#xf…

Baumer工业相机堡盟相机如何使用NEOAPI SDK实现相机的连接(C++)

Baumer工业相机堡盟相机如何使用NEOAPI SDK实现相机的连接&#xff08;C&#xff09; Baumer工业相机Baumer工业相机SDK技术背景代码分析第一步&#xff1a;先使用NEOAPI函数查找相机第二步&#xff1a;连接相机后对相机进行采图第三步&#xff1a;将采集的图像显示在UI界面上 …

乘势而上开新年!2024深圳深圳户外家具及休闲用品展览会三月开幕

中国户外家具市场在九十年代末开始崭露头角&#xff0c;随着国家经济的腾飞&#xff0c;尤其是房地产行业的迅猛发展&#xff0c;加上现代商业模式的建立和完善&#xff0c;产品和需求都以惊人的速度在发展。无论是国际知名品牌&#xff0c;还是国内的专业户外家具生产企业&…

Fiddler 抓包工具的安装与使用

今天分享Fiddler 抓包工具的安装与使用&#xff0c;基于HTTP应用层协议的抓包工具。 一、下载安装 1、下载地址&#xff1a; The Ultimate Web Debugging Tool - Download Fiddler Everywhere | Telerik 选择相应类型&#xff1a; 2、下载完成 3、安装 傻瓜式安装&#xf…

【OpenAI Q* 超越人类的自主系统】DQN :Q-Learning + 深度神经网络

深度 Q 网络&#xff1a;用深度神经网络&#xff0c;来近似Q函数 强化学习介绍离散场景&#xff0c;使用行为价值方法连续场景&#xff0c;使用概率分布方法实时反馈连续场景&#xff1a;使用概率分布 行为价值方法 DQN&#xff08;深度 Q 网络&#xff09; 深度神经网络 Q-L…