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);
}

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

昇思大模型平台打卡体验活动:项目5基于MindSpore实现Transformer机器翻译

首先仍然是先登录大模型体验平台 https://xihe.mindspore.cn/my/clouddev 启动&#xff01;&#xff01; 进入环境之后&#xff0c;即可开始运行notebook&#xff0c; Transformer 模型与实现 Transformer 是一种由 Vaswani 等人在 2017 年提出的神经网络结构&#xff08;论文…

‌关于人工智能(AI)的发展现状和未来趋势的详细分析!

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日将继续分享关于‌人工智能&#xff08;AI&#x…

提高排名的有效策略与实践指南

内容概要 在现代数字化时代&#xff0c;提高排名不仅是企业营销的关键&#xff0c;更是提升品牌知名度和客户粘性的有效途径。为了更好地理解这一主题&#xff0c;我们从多个方面进行详细分析。首先&#xff0c;明确"排名"的基本概念是非常重要的&#xff0c;它通常…

【Linux】动静态库

目录 1、制作静态库 2、站在使用者角度使用库 3、制作动态库 4、动态库是怎么被加载的 1、制作静态库 之前对动静态库的认识&#xff1a; libXXX.a-----静态库 静态链接&#xff1a;将库当中的代码拷贝到最终的可执行程序里&#xff0c;也就是&#xff0c;自己的源代码会变成…

AI绘画到底怎么画,才能出好图!一文详解

前言 在当今数字化的时代&#xff0c;AI 绘画以其强大的创造力和便捷性&#xff0c;成为了众多艺术爱好者和创作者的新宠。无论是专业画家想要拓展创作思路&#xff0c;还是业余爱好者渴望展现自己的创意&#xff0c;AI 绘画都提供了无限的可能。那么&#xff0c;究竟如何才能…

【React】深入理解 JSX语法

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 深入理解 JSX语法1. JSX 简介2. JSX 的基本语法2.1 基本结构2.2 与普通 JavaScr…

Kafka-Eagle 监控 搭建

Kafka-Eagle 框架可以监控 Kafka 集群的整体运行情况&#xff0c;在生产环境中经常使用。 在生产过程中&#xff0c;想创建topic、查看所有topic、想查看某个topic 想查看分区等&#xff0c;都需要写命令&#xff0c;能不能有一个图形化的界面&#xff0c;让我们操作呢&#x…

5位机械工程师如何共享一台工作站的算力?

在现代化的工程领域中&#xff0c;算力已成为推动创新与技术进步的关键因素之一。对于机械工程师而言&#xff0c;强大的计算资源意味着能够更快地进行复杂设计、模拟分析以及优化工作&#xff0c;从而明显提升工作效率与项目质量。然而&#xff0c;资源总是有限的&#xff0c;…

显示器接口种类 | 附图片

显示器接口类型主要包括VGA、DVI、HDMI、DP和USB Type-C等。 VGA、DVI、HDMI、DP和USB Type-C 1. 观察 VGA接口:15针 DP接口&#xff1a;在DP接口旁&#xff0c;都有一个“D”型的标志。 电脑主机&#xff1a;DP(D) 显示器&#xff1a;VGA(15针) Ref https://cloud.tenc…

C++常见概念问题(3)

C常见概念问题&#xff08;3&#xff09; 1. 构造函数的初始化顺序 基类构造函数&#xff1a;在派生类的构造函数中&#xff0c;基类的构造函数在派生类构造函数体执行之前调用。 成员变量初始化&#xff1a;类中的成员变量会按照其在类中声明的顺序进行初始化&#xff0c;而…

Tofu识别跟踪产品视频输入接口汇总

网络视频输入 视频输入默认支持网络RTSP协议视频&#xff0c;分辨率支持480P&#xff0c;720P&#xff0c;1080P&#xff0c;1440P等格式。 目前仅Tofu3支持1440P格式的400万像素视频&#xff0c;可通过升级包支持&#xff0c;400万像素分辨率目前仅支持25601440。 并行数字视…

【WRF工具】WRF 模型输出可视化工具 RIP4

【WRF工具】WRF 模型输出可视化工具 RIP4 1 可视化工具 RIP4 概述1.1 RIP4 的典型工作流程 2 安装 RIP42.1 下载 RIP42.2 编译 RIP4 3 运行 RIP43.1 准备输入文件3.2 运行 RIP 数据预处理程序&#xff08;ripdp_wrfarw&#xff09;3.3 运行 RIP 绘图程序&#xff08;rip&#x…

在Pybullet中加载Cinema4D创建的物体

首先明确我们的目标&#xff0c;是希望在cinema4D中创建自己想要的模型&#xff0c;并生成.obj文件&#xff0c;然后在pybullet中加载.obj文件作为静态物体&#xff0c;可以用于抓取物体&#xff0c;避障物体。&#xff08;本文提到的方法只能实现静态物体的建模&#xff0c;如…

学习方法——看差的书籍

CSAPP证明从1中午2点到下午3&#xff1a;40&#xff0c;但是还是只是推理证明而已&#xff0c;但是想起来了课上老师讲的东西了 还可以知道补码运算的大前提知识&#xff01;&#xff01;&#xff01;

微积分复习笔记 Calculus Volume 1 - 5.2 The Definite Integral

5.2 The Definite Integral - Calculus Volume 1 | OpenStax

SNH48 GROUP燃动杭州 第五届偶像运动会落下帷幕

2024年11月9日&#xff0c;“我们能赢”SNH48 GROUP第五届偶像运动会在杭州运河体育公园盛大开赛&#xff0c;本次运动会由高榕及SNH48郭爽、GNZ48梁娇作为赛事特邀主持人&#xff0c;并于小红书、微信视频号、SNH48 GROUP官方直播APP口袋48及MEET48全程直播。SNH48&#xff08…

35.安卓逆向-壳-Frida脚本脱壳

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a;图灵Python学院 本人写的内容纯属胡编乱造&#xff0c;全都是合成造假&#xff0c;仅仅只是为了娱乐&#xff0c;请不要盲目相信。第一…

未来已来!量子计算能否让你成为智商最高的人?

内容概要 在当今时代&#xff0c;量子计算不仅是科技领域的创新标志&#xff0c;更是一个重新定义智能边界的革命性力量。它的运算能力远超传统计算机&#xff0c;这使得复杂的问题在瞬息之间迎刃而解。通过量子比特&#xff08;qubits&#xff09;&#xff0c;信息呈现出一种…

Java爬虫:京东商品SKU信息的“偷心盗贼”

在这个信息爆炸的时代&#xff0c;数据就像是藏在深山里的宝藏&#xff0c;等待着我们这些“数据探险家”去发掘。今天&#xff0c;我们要化身为一名“偷心盗贼”&#xff0c;用Java这把锋利的“剑”&#xff0c;精准地从京东的海洋中窃取商品的SKU信息。别担心&#xff0c;我们…

RWKV 社区 10 月动态速览!

欢迎大家收看《RWKV 社区最新动态》&#xff0c;本期内容收录了 RWKV 社区 2024 年 10 月的最新动态。 10 月动态省流版&#xff08;TL;DR&#xff09; RWKV 社区活动 10 月 13 日&#xff0c;RWKV 团队在北京大学做了《RWKV 技术产品化与生态及模型架构》主题分享 RWKV 学术…