当前位置: 首页 > news >正文

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.lryc.cn/news/482357.html

相关文章:

  • go函数传值是值传递?还是引用传递?slice案例加图解
  • PostgreSQL数据库笔记
  • 财务软件源码SaaS云财务
  • Elasticsearch集群和Kibana部署流程
  • 丹摩征文活动 | 丹摩智算:大数据治理的智慧引擎与实践探索
  • 【Django】Clickjacking点击劫持攻击实现和防御措施
  • Ansys Zemax | 手机镜头设计 - 第 4 部分:用LS-DYNA进行冲击性能分析
  • 工具收集 - java-decompiler / jd-gui
  • 《无线重构世界》射频模组演进
  • 渗透测试---docker容器
  • 【go从零单排】Atomic Counters原子计数
  • VSCode中python插件安装后无法调试
  • 用react实现radio同时关联proform组件
  • Objective-C 1.0和2.0有什么区别?
  • TCP连接如何保障数据传输安全
  • 【论文复现】ChatGPT多模态命名实体识别
  • 管理 Elasticsearch 变得更容易了,非常容易!
  • SynchronousQueueworkQueue.offer() 和 poll() 方法的超时控制及线程池的讨论
  • 自动驾驶---“火热的”时空联合规划
  • 命令行工具进阶指南
  • 扫雷游戏代码分享(c基础)
  • 基于vue框架的的社区居民服务管理系统8w86o(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
  • 一分钟快速熟悉makedown
  • P8649 [蓝桥杯 2017 省 B] k 倍区间:同余,前缀和,组合数,区间个数
  • 产业与学术相互促进,2024年OEG海上能源博览会助力全球能源可持续发展
  • 【GDB调试】智慧中控项目的调试
  • 《一本书讲透 Elasticsearch》京东评论采集+存储+可视化全 AI 实现
  • uniapp中webview全屏不显示导航栏解决方案
  • Dear ImGui 使用VS2022编译为静态库
  • 5G 现网信令参数学习(3) - RrcSetup(1)