web前端动画按钮（附源代码）
效果图
源代码
HTML部分
<!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>
<link rel="stylesheet" href="..\暑假学习网页小零件\按钮2.css">
<body>
<a href="">爱莉希雅</a>
<a href="">爱莉希雅</a>
<a href="">爱莉希雅</a></body>
</html>
css部分
*{margin: 0;padding: 0;box-sizing: border-box;
}
body{display: flex;justify-content: center;align-items: center;gap: 100px;background-color: black;min-height: 100vh;
}
a{position: relative;padding: 10px 50px;margin: 45px 0;color:pink;text-decoration: none;font-size: 25px;font-family: 'Times New Roman', Times, serif;overflow: hidden;transition: all 0.4s;-webkit-box-reflect: below 1px linear-gradient(transparent,#0003);}
a::before{position: absolute;content: "";top: 0;left: 0;border-left: 3px solid pink;border-top: 3px solid pink;width: 20px;height: 15px;transition: all 0.5s;
}
a::after{position: absolute;content: "";bottom: 0;right: 0;border-right: 3px solid pink;border-bottom: 3px solid pink;width: 20px;height: 15px;transition: all 0.5s;
}
a:hover::before,
a:hover::after{width: 100%;height: 100%;
}
a:hover{background-color: pink;color: black;box-shadow: 0 0 pink;transition-delay: 0.5s;
}
/* 选择父元素下特定的位置，可以是数字，odd（奇数），even（偶数）或者表达式。 */
a:nth-child(1){ /* 滤镜 */filter: hue-rotate(150deg);
}
a:nth-child(3)
{filter: hue-rotate(280deg);
}相关文章：
web前端动画按钮（附源代码）
效果图 源代码 HTML部分 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> …...
go函数传值是值传递？还是引用传递？slice案例加图解
先说下结论 Go语言中所有的传参都是值传递（传值），都是一个副本，一个拷贝。 值语义类型：参数传递的时候，就是值拷贝，这样就在函数中就无法修改原内容数据。 基本类型：byte、int、bool…...
PostgreSQL数据库笔记
PostgreSQL 是什么 PostgreSQL（简称Postgres或PG）是一个功能强大、可靠性高、可扩展性好的开源对象-关系数据库服务器（ORDBMS），它以加州大学伯克利分校计算机系开发的POSTGRES版本4.2为基础。 发展历程 起源与发展&a…...
财务软件源码SaaS云财务
在如今的商业环境中，准确的财务管理是一家企业取得成功的关键。然而，传统的财务管理方法已经无法满足现代企业的需求，需要一个全新的解决方案。推出了全新的财务软件为您提供完美的解决方案。 选择财务软件源码，您将享受到以下优…...
Elasticsearch集群和Kibana部署流程
搭建Elasticsearch集群 1. 进入Elasticsearch官网下载页面，下载Elasticsearch 在如下页面选择Elasticsearch版本，点击download按钮，进入下载页面 右键选择自己操作系统对应的版本，复制下载链接 然后通过wget命令下载Elastics…...
丹摩征文活动 | 丹摩智算：大数据治理的智慧引擎与实践探索
丹摩DAMODEL｜让AI开发更简单！算力租赁上丹摩！ 目录 一、引言 二、大数据治理的挑战与重要性 （一）数据质量问题 （二）数据安全威胁 （三）数据管理复杂性 三、丹摩智算…...
【Django】Clickjacking点击劫持攻击实现和防御措施
Clickjacking点击劫持 1、clickjacking攻击2、clickjacking攻击场景 1、clickjacking攻击 clickjacking攻击又称为点击劫持攻击，是一种在网页中将恶意代码等隐藏在看似无害的内容（如按钮）之下，并诱使用户点击的手段。 2、clickj…...
Ansys Zemax | 手机镜头设计 - 第 4 部分：用LS-DYNA进行冲击性能分析
该系列文章将讨论智能手机镜头模组设计的挑战，从概念和设计到制造和结构变形分析。本文是四部分系列中的第四部分，它涵盖了相机镜头的显式动态模拟，以及对光学性能的影响。使用Ansys Mechanical和LS-DYNA对相机在地板上的一系列冲击和弹跳过程…...
工具收集 - java-decompiler / jd-gui
工具收集 - java-decompiler / jd-gui 参考资料 用法：拖进来就行了 参考资料 https://github.com/java-decompiler/jd-gui 脚本之家：java反编译工具jd-gui使用详解...
《无线重构世界》射频模组演进
射频前端四大金刚 射频前端由PA、LNA、滤波器、开关“四大金刚” 不同的模块有自己的工艺和性能特点 分层设计 射频前端虽然只由PA、LNA、开关、混频器4个模块构成，但不同模块之间相互连接且相互影响。如果将射频系统当成一个整体来理解，其中的细节和…...
渗透测试---docker容器
声明：学习素材来自b站up【泷羽Sec】，侵删，若阅读过程中有相关方面的不足，还请指正，本文只做相关技术分享,切莫从事违法等相关行为，本人一律不承担一切后果 目录 一、Docker的作用与优势 二、docker的核心…...
【go从零单排】Atomic Counters原子计数
🌈Don’t worry , just coding! 内耗与overthinking只会削弱你的精力，虚度你的光阴，每天迈出一小步，回头时发现已经走了很远。 📗概念 在 Go 语言中，原子计数器（Atomic Counters）是…...
VSCode中python插件安装后无法调试
问题 VSCode中python插件安装后无法调试，如下，点击调试，VScode中不报错，也没有调试 解决方法 1、查看配置 打开所在路径 2、拷贝 将整个文件夹拷贝到vscode默认路径下 3、问题解决 再次调试，可以正常使用了…...
用react实现radio同时关联proform组件
实现： <ProFormRadio.GroupradioType{button}name{[bodyConfig, format]}label"请求体格式"initialValue{json}options{createTabs}fieldProps{{buttonStyle: solid,wrapperMarginInlineEnd: 20,onChange: e > {let v e.target.value;databaseMod…...
Objective-C 1.0和2.0有什么区别？
Objective-C ObjC比较小众，在1980年左右由Stepstone公司的Brad Cox和Tom Love发明。后来NeXT公司获得ObjC语言使用权，再后来到1996年NeXT被苹果公司收购也变成苹果公司使用，Mac市场占有率本身就不高，ObjC没有太多程序员。在移动互…...
TCP连接如何保障数据传输安全
TCP连接保障数据传输安全主要通过以下几个机制实现： 1、建立连接：TCP通过三次握手过程建立连接，确保通信双方实体真实存在，为后续的可靠数据传输打下基础。 2、序号机制：TCP为每个传输的数据包分配一个序号ÿ…...
【论文复现】ChatGPT多模态命名实体识别
📝个人主页🌹：Eternity._ 🌹🌹期待您的关注 🌹🌹 ❀ChatGPT ChatGPT辅助细化知识增强！1. 研究背景2. 模型结构和代码3. 任务流程第一阶段：辅助精炼知识启发式生成第二阶段…...
管理 Elasticsearch 变得更容易了，非常容易！
作者：来自 Elastic Ken Exner Elasticsearch 用户，我们听到了你的心声。管理 Elasticsearch 有时会变得很复杂，面临的挑战包括性能调整、问题检测和资源优化。我们一直致力于简化你的体验。今天，我们宣布了自收购 Opster 以来的一…...
 和 poll() 方法的超时控制及线程池的讨论)
SynchronousQueueworkQueue.offer() 和 poll() 方法的超时控制及线程池的讨论
2024.11.12 11:26 问：workQueue.offer(command) 这里 workQueue.poll(keepAlive, TimeUnit.NANOSECONDS) : 这里的 workQueue.offer(command) 没有超时时间控制？ Claude 3.5 Haiku 非常好的问题！我来详细解释 offer() 和 poll() 方法的区别…...
自动驾驶---“火热的”时空联合规划
1 背景 早期的不少规划算法都是横纵分离的（比如Apollo），先求解path之后，依赖path的结果再进行speed的求解。这种横纵解耦的规划方式具有以下特点： 相对较为简单，计算量通常较小，容易实现实时性要求。但是由于分别规划横向和纵向运动，可能会忽略两者之间的耦合关系，导致…...
KubeSphere 容器平台高可用：环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界，看笔记好好学多敲多打，每个人都是大神！ 题目：KubeSphere 容器平台高可用：环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
。】2022-5-15)
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
（二）原型模式
原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理
引言 Bitmap（位图）是Android应用内存占用的“头号杀手”。一张1080P（1920x1080）的图片以ARGB_8888格式加载时，内存占用高达8MB（192010804字节）。据统计，超过60%的应用OOM崩溃与Bitm…...
让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中，损失函数的选择对模型性能具有决定性影响。均方误差（MSE）作为经典的损失函数，在处理干净数据时表现优异，但在面对包含异常值的噪声数据时，其对大误差的二次惩罚机制往往导致模型参数…...
推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)
推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...
DingDing机器人群消息推送
文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人，点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置，详见说明文档 成功后，记录Webhook 2 API文档说明 点击设置说明 查看自…...
android13 app的触摸问题定位分析流程
一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...