<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>流光溢彩，极度惊艳！利用伪类before和CSS动画实现的非常酷炫的按钮效果</title>
<link rel="stylesheet" href="./style.css">
<style>
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
text-align: center;
background: #111;
}
button{
margin: 30px;
}
.btn {
position: relative;
padding: 1rem 3rem;
font-family: "微软雅黑", sans-serif;
font-size: 1.5rem;
font-weight:700;
line-height: 1.5;
color: black;
text-decoration: none;
text-shadow: -1px -1px 0px rgba(0,0,0,0.3),1px 1px 0px rgba(255,255,255,0.3);
background-color: white;
border: transparent;
outline: transparent;
cursor: pointer;
user-select: none;
white-space: nowrap;
animation: glow 8s linear infinite;
}
.btn-gradient {
color: white;
background: linear-gradient(90deg, #00dbde, #fc00ff, #00dbde);
background-size: 300%;
border-radius: 2em;
}
.btn-gradient::before {
position: absolute;
content: "";
top: -5px;
left: -5px;
bottom: -5px;
right: -5px;
z-index: -1;
background: inherit;
background-size: inherit;
border-radius: 4em;
opacity: 0;
transition: 0.5s;
}
.btn-gradient:hover{
coloer:#ececec;
}
.btn-gradient:hover::before {
opacity: 1;
filter: blur(20px);
animation: glow 8s linear infinite;
}
@keyframes glow {
to {
background-position: 300%;
}
}
.golden{
color: #504227;
background-image: linear-gradient(to right, #fff89b, #997744, #fff89b, #997744, #fff89b);
}
.shine{
background-image: linear-gradient(to right, red, gold, lightgreen, gold, red);
}
.black{
background-image: linear-gradient(to right, #252525,#393e40,#4f4f4f,#6d6d6d, #252525);
}
</style>
</head>
<body>
<button class="btn btn-gradient">我是一个华丽的按钮</button>
<button class="btn btn-gradient golden">我是一个奢华的按钮</button>
<button class="btn btn-gradient shine">我是一个热情的按钮</button>
<button class="btn btn-gradient black">我是一个沉稳的按钮</button>
</body>
</html>
流光溢彩，极度惊艳！利用伪类before和CSS动画实现的非常酷炫的按钮效果.zip （2个子文件） 
流光溢彩，极度惊艳！利用伪类before和CSS动画实现的非常酷炫的按钮效果 
流光溢彩，极度惊艳！利用伪类before和CSS动画实现的非常酷炫的按钮效果.gif 1.75MB
流光溢彩，极度惊艳！利用伪类before和CSS动画实现的非常酷炫的按钮效果.html 2KB资源评论
鱼仰泳
- 粉丝: 744
- 资源: 48
最新资源
- 上课教材ppt-数据库系统原理及MySQL应用教程（第二版）课件.zip
- usb gadget 学习资料
- 智能毕设项目开发基础教程
- 实用脚本工具：自动化编程基础教程
- LabVIEW编程入门与实践基础教程
- 嵌入式开发入门与实践基础教程
- JFinal-Python资源
- 胆小菇 Python Selenium 爬虫入门：批量将豆瓣书影标记设置为"仅自己可见"
- bboss-plugins-kafka
- iotucy-websocket
- 胆小菇 Python Selenium 爬虫入门：批量将豆瓣书影标记设置为"仅自己可见"
- StudentManageSystem-建立学生信息链表
- Sa-Token-java
- 基于Atlas 200I DK A2研究的机械臂目标检测系统-注意力机制
- ga_network_reconfiguration-遗传算法
- tomcat-tomcat
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
