知识笔记(六十五)———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.mzph.cn/news/587138.shtml

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

相关文章

初识javaWeb

一、JavaWeb是什么&#xff1f; 1、概念 javaWeb指的是使用java语言进行互联网领域项目开发的技术栈——进行web项目开发所需的技术的集合。 -Web前端——在浏览器中用户可以看到的网页 -Web后端——为前端提供数据的程序 2、Web项目 java语言是可以进行多种类型的项目开发&a…

网大为卸任腾讯CXO;Midjourney 1 月训练视频模型;2023年马斯克赚了7700亿

投融资 • 2023 年大型科技公司在生成式 AI 初创企业上的投资远超风险投资集团• 恒信东方与无锡政府合作成立布局 MR/XR 技术及 3D 数字资产 AIGC 产业投资基金• 新公司法完善注册资本认缴登记制度• 网大为卸任腾讯CXO&#xff0c;曾促成南非MIH的投资• 宁波蔚孚科技完成数…

【VS】NETSDK1045 当前 .NET SDK 不支持将 .NET 6.0 设置为目标。

问题描述 报错 NETSDK1045 严重性代码说明项目文件行禁止显示状态错误NETSDK1045当前 .NET SDK 不支持将 .NET 6.0 设置为目标。请将 .NET 5.0 或更低版本设置为目标&#xff0c;或使用支持 .NET 6.0 的 .NET SDK 版本。RCSoftDrawMicrosoft.NET.TargetFrameworkInference.ta…

悟的数组匹配

题目&#xff1a; 描述 牛牛刚学会数组不久&#xff0c;他拿到两个数组 a 和 b&#xff0c;询问 b 的哪一段连续子数组之和与数组 a 之和最接近。 如果有多个子数组之和同样接近&#xff0c;输出起始点最靠左的数组。 输入描述&#xff1a; 第一行输入两个正整数 n 和 m &…

年度总结|存储随笔2023年度最受欢迎文章榜单TOP15-part2

TOP11&#xff1a;PCIe在狂飙&#xff0c;SAS存储之路还有多远&#xff1f; 随着科技的飞速发展&#xff0c;固态硬盘&#xff08;SSD&#xff09;已经成为现代计算机系统中不可或缺的一部分。它以其出色的性能和可靠性&#xff0c;改变了我们对于存储设备的期待。当前业内SSD广…

Java(算术,自增自减,赋值,关系,逻辑,三元)运算符,运算符的优先级,隐式转换,强制转换,字符串的+。

文章目录 1.运算符和表达式运算符&#xff1a;表达式&#xff1a; 2.算术运算符练习&#xff1a;数值拆分 3.隐式转换概念&#xff1a;简单记忆&#xff1a;两种提升规则&#xff1a;取值范围从小到大的关系&#xff1a; 4.隐式转换的练习案例一&#xff1a;案例二&#xff1a;…

Python中如何使用_new_实现单例模式

单例模式是一个经典设计模式&#xff0c;简要的说&#xff0c;一个类的单例模式就是它只能被实例化一次&#xff0c;实例变量在第一次实例化时就已经固定。 在Python中常见的单例模式有None&#xff0c;这就是一个很典型的设计&#xff0c;通常使用 if xxx is None或者if xxx …

【Linux Shell学习笔记】Linux Shell的位置参数与函数

一、位置参数 位置参数&#xff0c;也被称之为位置变量&#xff0c;通过位置参数&#xff0c;可以在执行程序的时候&#xff0c;向程序传递数据 1.1 shell接收参数的方法 1.2 向shell传递参数的方法 二、函数 2.1 函数基础 2.1.1 函数简介 函数本质上就是一个代码块&#xf…

微信小程序开发系列-07组件

微信小程序开发系列目录 《微信小程序开发系列-01创建一个最小的小程序项目》《微信小程序开发系列-02注册小程序》《微信小程序开发系列-03全局配置中的“window”和“tabBar”》《微信小程序开发系列-04获取用户图像和昵称》《微信小程序开发系列-05登录小程序》《微信小程序…

数据库的事务调度

调度 要求&#xff1a;一个事务中的操作相对顺序不能变。 以事务为单位&#xff0c;串行调度。 以操作为单位&#xff0c;并发调度。 并发调度的结果等于串行调度&#xff0c;那么并发调度是可串行化的&#xff0c;是正确的&#xff0c;是可以用来并发的。 并发级别以及其面临…

碎花连衣裙 I 森系女孩的衣橱

宛如来到了春天&#xff0c;身穿碎花连衣裙的少女 在充满阳光&#xff0c;树叶葱郁的森林里 自由快乐地穿梭&#xff0c;感受着春天的美好 感受着幸福而快乐的童年&#xff01;

10 款顶级的免费U盘数据恢复软件(2024 年 更新)

你曾经遇到过U盘无法访问的情况吗&#xff1f;现在我们教你如何恢复数据。 在信息时代&#xff0c;数据丢失往往会造成巨大的困扰。而USB闪存驱动器作为我们常用的数据存储设备&#xff0c;其重要性不言而喻。但是&#xff0c;U盘也可能会出现各种问题&#xff0c;如无法访问、…

清华开源ChatGPT自动编程ChatDev项目codes.py代码解读

这段代码定义了一个Codes类&#xff0c;这个类是用于管理生成的代码的类&#xff0c;它可以根据LLM的回复来提取、格式化、更新和保存代码。Codes类的__init__()方法是类的构造函数&#xff0c;它接受一个参数generated_content&#xff0c;表示LLM的回复内容。它首先初始化了以…

conftest.py 配置

章节目录&#xff1a; 一、概述二、场景说明三、代码示例3.1 最外层3.2 商品模块测试3.3 订单模块测试3.4 用户模块测试3.5 执行结果 四、关于 conftest.py 配置 fixture五、结束语 一、概述 “conftest.py” 是 pytest 测试框架中的一个特殊的配置文件&#xff0c;它能够为整个…

分布式技术之缓存技术

文章目录 什么是分布式缓存&#xff1f;分布式缓存原理Redis 分布缓存原理Memcached 分布式缓存原理对比分析 在计算机领域的各个方面&#xff0c;缓存都非常重要&#xff0c;是提升访问性能的一个重要技术。为什么这么说呢&#xff1f;从单个计算机的体系结构来看&#xff0c;…

【并发设计模式】聊聊等待唤醒机制的规范实现

在多线程编程中&#xff0c;其实就是分工、协作、互斥。在很多场景中&#xff0c;比如A执行的过程中需要同步等待另外一个线程处理的结果&#xff0c;这种方式下&#xff0c;就是一种等待唤醒的机制。本篇我们来讲述等待唤醒机制的三种实现&#xff0c;以及对应的应用场景。 G…

守护青山绿水 千巡翼Q20无人机变身护林员

守护青山绿水 千巡翼Q20无人机变身护林员 无人机目前在林业上的应用主要在森林资源调查、森林资源监测、森林火灾监测、森林病虫害监测防治、野生动物监测等方面。传统手段在森林资源调查中需要耗费大量人力物力&#xff0c;利用无人机技术可快速获得所需区域高精度信息&#…

SpringMVC学习与开发(四)

注&#xff1a;此为笔者学习狂神说SpringMVC的笔记&#xff0c;其中包含个人的笔记和理解&#xff0c;仅做学习笔记之用&#xff0c;更多详细资讯请出门左拐B站&#xff1a;狂神说!!! 11、Ajax初体验 1、伪造Ajax 结果&#xff1a;并未有xhr异步请求 <!DOCTYPE html> &…

关于蚁剑(AntSword)的溯源反制

中国蚁剑(AntSword) RCE漏洞 此漏洞在AntSword2.7.1版本上修复 &#xff0c;所以适用于AntSword2.7.1以下版本。 下面介绍被低版本蚁剑攻击后如何进行溯源反打 以物理机为攻击机&#xff0c;虚拟机kali模拟受害者&#xff0c;之后使用kali进行溯源反制 物理机内网ip地址&…

nodejs+vue网上书城图书销售商城系统io69w

功能介绍 该系统将采用B/S结构模式&#xff0c;使用Vue和ElementUI框架搭建前端页面&#xff0c;后端使用Nodejs来搭建服务器&#xff0c;并使用MySQL&#xff0c;通过axios完成前后端的交互 系统的主要功能包括首页、个人中心、用户管理、图书类型管理、图书分类管理、图书信…