前端 CSS 经典:mac docker 效果

前言:浏览器上实现 mac docker 效果,实现思路,1. 布局,方框间距用元素代替,因为有放大缩小功能,不用元素的话,不好控制。2. 定义个 css 变量 i,用来代表放大比例。3. 确定每个元素的 i 值,根据鼠标移动,动态生成一个曲线。设计曲线函数。

效果:

代码实现:

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;text-align: justify;}body {background: #000;color: #fff;}.docker-container {position: fixed;bottom: 10px;display: flex;justify-content: center;width: 100%;}.docker {box-sizing: content-box;height: 30px;display: flex;justify-content: center;align-items: end;padding: 5px 10px;background: rgba(255, 255, 255, 0.3);}.menu {display: flex;align-items: end;}.menu-item {border-radius: 5px;width: calc(var(--i, 1) * 30px);height: calc(var(--i, 1) * 30px);margin-bottom: calc(var(--i, 1) * 15px - 15px);background: #b4433d;border: 1px solid #ccc;}.gap {width: calc(var(--i, 1) * 10px);height: 30px;}.menu .menu-item:nth-child(3n + 1) {background: blue;}.menu .menu-item:nth-child(3n) {background: yellow;}</style></head><body><div class="docker-container"><div class="docker"><div class="menu"><div class="menu-item"></div><div class="gap"></div><div class="menu-item"></div><div class="gap"></div><div class="menu-item"></div><div class="gap"></div><div class="menu-item"></div><div class="gap"></div><div class="menu-item"></div><div class="gap"></div><div class="menu-item"></div><div class="gap"></div><div class="menu-item"></div><div class="gap"></div><div class="menu-item"></div><div class="gap"></div><div class="menu-item"></div><div class="gap"></div><div class="menu-item"></div><div class="gap"></div><div class="menu-item"></div></div></div></div><script>const docker = document.querySelector(".docker");const items = document.querySelector(".menu").children;const range = 500;const maxScale = 1.8;const layout = (curve) => {for (const item of items) {const rect = item.getBoundingClientRect();const x = rect.x + rect.width / 2;const scale = curve(x);item.style.setProperty("--i", scale);}};const baseCure = (x) => {if (x < 0) return 0;if (x > 1) return 0;return Math.sin(x * Math.PI);};const createCure = (totalXDis, topX, minY, maxY) => {return function curve(x) {const beginX = topX - totalXDis / 2;const endX = topX + totalXDis / 2;if (x < beginX) return minY;if (x > endX) return minY;const yDis = maxY - minY;return baseCure((x - beginX) / totalXDis) * yDis + minY;};};docker.onmousemove = (e) => {const curve = createCure(range, e.clientX, 1, maxScale);layout(curve);};docker.onmouseleave = () => {layout(() => 1);};</script></body>
</html>

 

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

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

相关文章

信息系统项目管理师软考高级论文教程必过论文分享

很多人提到软考就会想到信息系统项目管理师和系统集成项目管理工程师&#xff0c;这两个不同的软考内容的区别不仅仅在于一个是高级&#xff0c;一个是中级&#xff0c;还有一个区别是它们的考试内容也是不同的&#xff0c;高级的信息系统项目管理师考试多了一项论文的考试&…

K-means 聚类算法和K-means ++聚类算法详解【5】

1、通俗易懂的讲解链接 补充链接&#xff0c;K- means算法的K值选择策略&#xff1a;链接一&#xff0c;链接二​​​​​​​&#xff1b; 后续关键点渐次补充

MySQL入门学习-查询进阶.正则表达式

在 MySQL 中&#xff0c;正则表达式是用于匹配文本模式的工具。正则表达式可以用于在查询中进行模式匹配&#xff0c;以便更精确地查找和操作数据。 一、以下是一些常见的查询进阶操作和正则表达式的特点、使用方法以及与其他比较和高级应用的示例&#xff1a; 1. LIKE操作符…

USART串口数据包

USART串口数据包 先来看两张图&#xff0c;本次程序是串口收发HEX数据包&#xff0c;第二种是串口收发文本数据包&#xff0c;之后两个图&#xff0c;展示的就是接收数据包的思路。 在PB1这里接了一个按键&#xff0c;用于控制。在串口助手&#xff0c;在发送模式和接收模式都…

Debian 常用命令指南:基础篇

Debian 是一款广泛使用的 Linux 发行版&#xff0c;以其稳定性和安全性著称。对于新手来说&#xff0c;掌握一些常用的命令行工具是顺利使用 Debian 的第一步。本篇文章将介绍一些 Debian 系统中最常用的基础命令&#xff0c;帮助你更好地管理和操作你的系统。 1. 系统信息相关…

JAVA拦截器的三种实现方式

JAVA拦截器的三种实现方式 一、java原生过滤器Filter二、springMVC拦截器三、aop切面实现拦截器 一、java原生过滤器Filter /*** 自定义Filter* 对请求的header 过滤token** 过滤器Filter可以拿到原始的HTTP请求和响应的信息&#xff0c;* 但是拿不到你真正处理请求方法的…

Java 基础面试300题 (141- 170 )

Java 基础面试300题 &#xff08;141- 170 &#xff09; 141. 编译运行以下代码时会发生什么&#xff1f; class Mammal {} class Cat extends Mammal { } List<Mammal> list new ArrayList<Cat>();上述代码将出现编译错误。这是因为为List指定了Mammal哺乳动物…

SpringSecurity6从入门到实战之整合原生Filter链

SpringSecurity6从入门到实战之整合原生Filter链 DelegatingFilterProxy 从官网上来进行学习可以看到第一个类就是DelegatingFilterProxy,我们首先看看官网给下的定义. Spring提供了一个名为DelegatingFilterProxy的过滤器实现&#xff0c;它允许在Servlet容器的生命周期和Spr…

Raid的全局热备和独立热备

目录 Hot Spare背景: 1.定义与功能 2.数据存储与容量 3.配置模式 4.数量限制&#xff1a; 5.数据重建: 6.管理与维护 实操全局热备和独立热备&#xff1a; 配置全局热备: 配置独立热备: Hot Spare背景: 在RAID配置中&#xff0c;Hot Spare(热备)是一个非常重要的概念…

amis源码 Api接口调用解析:

Amis中传入用户自定义fetcher(基于fetcher做接口调用)&#xff1a; 1.embed渲染时可以传入用户定义的fetcher(接口调用)&#xff1a; import axios from "/libs/api.request"; //自定义的fetcher调用接口&#xff08;axios调用&#xff09; { fetcher: ()>{ ……

发现一个ai工具网站

网址 https://17yongai.com/ 大概看了下&#xff0c;这个网站收集的数据还挺有用的&#xff0c;有很多实用的ai教程。 懂ai工具的可以在这上面找找灵感。

善听提醒遵循易经原则。世界大同只此一路。

如果说前路是一个大深坑&#xff0c;那必然是你之前做的事情做的不太好&#xff0c;当坏的时候&#xff0c;坏的结果来的时候&#xff0c;是因为你之前的行为&#xff0c;你也就不会再纠结了&#xff0c;会如何走出这个困境&#xff0c;是好的来了&#xff0c;不骄不躁&#xf…

事先预判事的结果事先预防从容应对防微杜渐

很多人呢&#xff0c;学习倪老师的知识&#xff0c;也都是从他的中医方面&#xff0c;认识了他很多的东西呢&#xff0c;对于倪老师的知识性的总结的东西呢&#xff0c;不是很了解。 其实啊&#xff0c;倪老师也是一个&#xff0c;对于这种文化的传承&#xff0c;有着很大很深刻…

一些汇编语言的总结

一、汇编语言的介绍 1、汇编语言和处理器指令集高度相关&#xff0c;不同指令集的汇编语言不兼容。 2、汇编语言是对机器语言的一种抽象&#xff0c;用英文字符来代表运算和控制指令&#xff0c;用英文字母和数字代表操作数。 二、常用的汇编语言 有 x86的汇编语言&#xff…

YOLOv10涨点改进:卷积魔改 | 分布移位卷积(DSConv),提高卷积层的内存效率和速度

💡💡💡本文改进内容: YOLOv10如何魔改卷积进一步提升检测精度?提出了一种卷积的变体,称为DSConv(分布偏移卷积),其可以容易地替换进标准神经网络体系结构并且实现较低的存储器使用和较高的计算速度。 DSConv将传统的卷积内核分解为两个组件:可变量化内核(VQK)和…

iOS编程入门:揭秘神秘的开发世界

iOS编程入门&#xff1a;揭秘神秘的开发世界 在数字化时代的浪潮中&#xff0c;iOS编程成为了许多开发者热衷探索的领域。想要入门iOS编程&#xff0c;不仅需要掌握基础知识&#xff0c;还需理解其独特的生态系统。本文将通过四个方面、五个方面、六个方面和七个方面&#xff…

golang中通过反射获取结构体Tag标签定义的内容 函数和测试用例

当我们在go语言中定义结构体的时候&#xff0c; 经常需要给某些字段打上一个Tag标签, 如 Name string json:"name" , 那这个标签有和作用呢&#xff1f; 这个作用可大了&#xff0c;最为常用的是json序列化和反序列化&#xff0c; 还有各种ORM 的实体对象定义&…

C# yolov8 TensorRT +ByteTrack Demo

C# yolov8 TensorRT ByteTrack Demo 目录 效果 说明 项目 代码 Form2.cs YoloV8.cs ByteTracker.cs 下载 参考 效果 说明 环境 NVIDIA GeForce RTX 4060 Laptop GPU cuda12.1cudnn 8.8.1TensorRT-8.6.1.6 版本和我不一致的需要重新编译TensorRtExtern.dll&…

微调医疗大模型,与通用大模型效果对比

下面是一份CT描述&#xff1a; “肝脏大小、形态未见明确异常。肝S2见一结节状低密度影&#xff0c;大小约13x11mm&#xff0c;增强扫描呈明显渐进性强化&#xff0c;延迟期呈等密度。余肝实质内未见异常密度影或强化灶。肝内大血管及其分支走行未见异常&#xff0c;肝门区层次…

ip地址告诉别人安全吗?ip地址告诉别人会有什么风险

IP地址告诉别人安全吗&#xff1f;在数字化时代&#xff0c;IP地址作为网络连接的关键标识符&#xff0c;承载着重要的安全意义。然而&#xff0c;很多人可能并不清楚&#xff0c;轻易地将自己的IP地址告诉他人可能带来一系列安全风险。那么&#xff0c;IP地址告诉别人会有什么…