css 四角边框移动效果

  1. 块是长宽相等的正方形,大小浏览器分辨率变化而变化
  2. 利用平移变化translate来时实现边框到达鼠标划到的块,坐标是鼠标滑到块的offsetLeft和offsetTop
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;}body {background-color: goldenrod;}.box {width: 80%;/* padding: 30px 20px; */margin: 50px auto;display: grid;grid-template-columns: repeat(3, 1fr);gap: 50px;background-color: goldenrod;position: relative;}.item {aspect-ratio: 1/1;background-color: cyan;}.item img {/* margin: 0;padding: 0; */display: block;width: 100%;height: 100%;}.pointer {cursor: pointer;position: absolute;/*线条的粗细*/--t: 3px;/*线条的长*/--l: 30px;/*线条离块的距离*/--g: 20px;/*块的大小*/--s: 400px;/*遮罩层的x坐标*/--x: 0px;/*遮罩层的y坐标*/--y: 0px;width: calc(var(--s) + 2 * var(--g));height: calc(var(--s) + 2 * var(--g));left: 0;top: 0;border: var(--t) solid #fff;margin-left: calc(-1 * var(--g));margin-top: calc(-1 * var(--g));transform: translate(var(--x), var(--y));transition: 0.5s;-webkit-mask: conic-gradient(at var(--l) var(--l), transparent 75%, blue 75% 100%) 0 0/calc(100% - var(--l)) calc(100% - var(--l));}
</style><body><div class="box"><div class="item"><img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><div class="item"><img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><div class="item"><img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><div class="item"><img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><div class="item"><img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><div class="item"><img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><div class="item"><img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><div class="item"><img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><div class="item"><img src="https://img2.baidu.com/it/u=2114237128,817343503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"alt=""></div><div class="pointer"></div></div></body>
<script>const items = document.querySelectorAll('.box .item')const pointer = document.querySelector('.pointer')for (const item of items) {item.onmouseenter = function () {const width = item.clientWidthconst x = item.offsetLeftconst y = item.offsetToppointer.style.setProperty('--s', width + 'px')pointer.style.setProperty('--x', x + 'px')pointer.style.setProperty('--y', y + 'px')}}
</script></html>

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

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

相关文章

誉天程序员-SpringMVC回顾:五种接参方式

1、GET查询串传参&#xff1a; 2、RESTFul形式传参&#xff08;参数少&#xff09; 3、form表单传参 4、混合传参&#xff0c;查询串表单 5、终极王者&#xff0c;json传参&#xff08;参数多&#xff09; package com.book.admin.controller;import com.book.admin.entity.Us…

从互联网到云时代,Apache RocketMQ 是如何演进的?

作者&#xff1a;隆基 2022 年&#xff0c;RocketMQ 5.0 的正式版发布。相对于 4.0 版本而言&#xff0c;架构走向云原生化&#xff0c;并且覆盖了更多业务场景。 消息队列演进史 操作系统、数据库、中间件是基础软件的三驾马车&#xff0c;而消息队列属于最经典的中间件之一…

用python需要下载软件吗,python需要安装哪些软件

大家好&#xff0c;本文将围绕安装python需要什么样的电脑配置展开说明&#xff0c;python需要安装哪些软件是一个很多人都想弄明白的事情&#xff0c;想搞清楚用python需要下载软件吗需要先了解以下几个事情。 编程这东西很神奇。对于那些知道如何有用和有趣的这个工具,对于Xi…

Windows 实例如何开放端口

矩池云 Windows 实例相比于 Linux 实例&#xff0c;除了在租用机器的时候自定义端口外&#xff0c;还需要在 Windows防火墙中添加入口规则。接下来将教大家如何设置 Windows 防火墙&#xff0c;启用端口。 租用成功后通过 RDP 链接连接服务器&#xff0c;然后搜索防火墙&#x…

React的UmiJS搭建的项目集成海康威视h5player播放插件H5视频播放器开发包 V2.1.2

最近前端的一个项目&#xff0c;大屏需要摄像头播放&#xff0c;摄像头厂家是海康威视的&#xff0c;网上找了一圈都没有React集成的&#xff0c;特别是没有使用UmiJS搭脚手架搭建的&#xff0c;所以记录一下。 海康威视的开放平台的API地址&#xff0c;相关插件和文档都可以下…

使用 docker-compose 一键部署多个 redis 实例

目录 1. 前期准备 2. 导入镜像 3. 部署redis master脚本 4. 部署redis slave脚本 5. 模板文件 6. 部署redis 7. 基本维护 1. 前期准备 新部署前可以从仓库&#xff08;repository&#xff09;下载 redis 镜像&#xff0c;或者从已有部署中的镜像生成文件&#xff1a; …

简单的python有趣小程序,有趣的代码大全python

这篇文章主要介绍了python简单有趣的程序源代码&#xff0c;具有一定借鉴价值&#xff0c;需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获&#xff0c;下面让小编带着大家一起了解一下。

网络防御技术:防火墙与入侵检测系统

目录 简介&#xff1a; 1. 防火墙基础 1.1 类型 1.2 防火墙规则配置 2. 入侵检测系统&#xff08;IDS&#xff09;基础 2.1 类型 2.2 IDS规则配置 总结 简介&#xff1a; 在当今数字化时代&#xff0c;网络安全威胁日益增加&#xff0c;保护网络免受恶意攻击变得尤为重…

安装 mysql8.0-docker版安装

一、docker安装 安装docker2022版&#xff08;对大家有帮助&#xff09; 二、docker 安装mysql8.0 1.从 Docker Hub 下载 MySQL 8.0 镜像。打开终端并运行以下命令&#xff1a; docker pull mysql:8.0 2.创建一个 MySQL 容器并运行。在终端中运行以下命令&#xff1a; docke…

Hadoop学习日记-YARN组件

YARN(Yet Another Resource Negotiator)作为一种新的Hadoop资源管理器&#xff0c;是另一种资源协调者。 YARN是一个通用的资源管理系统和调度平台&#xff0c;可为上层应用提供统一的资源管理和调度 YARN架构图 YARN3大组件&#xff1a; &#xff08;物理层面&#xff09…

ICML 2023 | 拓展机器学习的边界

编者按&#xff1a;如今&#xff0c;机器学习已成为人类未来发展的焦点领域&#xff0c;如何进一步拓展机器学习技术和理论的边界&#xff0c;是一个极富挑战性的重要话题。7月23日至29日&#xff0c;第四十届国际机器学习大会 ICML 2023 在美国夏威夷举行。该大会是由国际机器…

HarmonyOS/OpenHarmony元服务开发-配置卡片的配置文件

卡片相关的配置文件主要包含FormExtensionAbility的配置和卡片的配置两部分&#xff1a; 1.卡片需要在module.json5配置文件中的extensionAbilities标签下&#xff0c;配置FormExtensionAbility相关信息。FormExtensionAbility需要填写metadata元信息标签&#xff0c;其中键名称…

CentOS 7安装Docker

文章目录 &#x1f31e;版本选择☀️1.CentOS安装Docker&#x1f331;1.1.卸载&#xff08;可选&#xff09;&#x1f331;1.2.安装docker&#x1f331;1.3.启动docker&#x1f331;1.4.配置镜像加速 ☀️2.CentOS7安装DockerCompose&#x1f331;2.1.下载&#x1f331;2.2.修改…

赛车游戏——【极品飞车】(内含源码inscode在线运行)

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 「推荐专栏」&#xff1a; ★java一站式服务 ★ ★前端炫酷代码分享 ★ ★ uniapp-从构建到提升★ ★ 从0到英雄&#xff0c;vue成神之路★ ★ 解决算法&#xff0c;一个专栏就够了★ ★ 架…

【Lua学习笔记】Lua进阶——Table(3) 元表

接上文 文章目录 元表__tostring__call__index__newindex运算符元方法其它元表操作 元表 Q&#xff1a;为什么要使用元表&#xff1f; A&#xff1a;在Lua中&#xff0c;常常会需要表与表之间的操作。元表中提供了一些元方法&#xff0c;通过自定义元方法可以实现想要的功能&…

掌握三个基础平面构成法则 优漫动游

1.图形重复&#xff1a;通过重复使用同一种或类似的图形元素,创造出一种有节奏、有重复感的视觉效果。这种设计手法可以使海报看起来更加统一和协调,增强视觉冲击力。 掌握三个基础平面构成法则 2.字体重复&#xff1a;通过重复使用同一种或类似的字体元素,创造出一种有序…

时间复杂度为O(n2)的三种简单排序算法

1.冒泡排序 冒泡排序只会操作相邻的两个数据。每次冒泡操作都会对相邻的两个元素进行比较&#xff0c;看是否满足大小关系要求。如果不满足就让它俩互换。一次冒泡会让至少少一个元素移动到它应该在的位置&#xff0c;重复n次&#xff0c;就完成了n个数据的排序工作。 /*** …

[Tools: Pycharm] Bug合集

1. Debug mode&#xff1a;Pycharm不显示变量值&#xff08;Unable to display frame variables&#xff09;&#xff1b;在python console中交互不输出值 选择Gevent compatible&#xff1a;File > Settings > Build, Execution, Deployment > Python Debugger >…

两种单例模式

1.单例模式分为两种,饿汉模式和懒汉模式.以下是饿汉模式: public class SingleTonHungry {private static SingleTonHungry singleTonHungry new SingleTonHungry();private SingleTonHungry() {}public static SingleTonHungry getInstance() {return singleTonHungry;} }2.…

数据包在网络中传输的过程

ref: 【先把这个视频看完了】&#xff1a;数据包的传输过程【网络常识10】_哔哩哔哩_bilibili 常识都看看 》Ref&#xff1a; 1. 这个写的嘎嘎好&#xff0c;解释了为啥4层7层5层&#xff0c;还有数据包封装的问题:数据包在网络中的传输过程详解_数据包传输_张孟浩_jay的博客…