ZIPCSS太牛了！流光溢彩，极度惊艳！利用伪类before和CSS动画实现的非常酷炫的按钮效果.zip 1.71MB

uuplay0216需要积分:3(1积分=1元)

资源文件列表:

流光溢彩，极度惊艳！利用伪类before和CSS动画实现的非常酷炫的按钮效果.zip 大约有3个文件
  1. 流光溢彩，极度惊艳！利用伪类before和CSS动画实现的非常酷炫的按钮效果/流光溢彩，极度惊艳！利用伪类before和CSS动画实现的非常酷炫的按钮效果.gif 1.75MB
  2. 流光溢彩，极度惊艳！利用伪类before和CSS动画实现的非常酷炫的按钮效果/流光溢彩，极度惊艳！利用伪类before和CSS动画实现的非常酷炫的按钮效果.html 2.06KB
  3. 流光溢彩，极度惊艳！利用伪类before和CSS动画实现的非常酷炫的按钮效果/

资源介绍:

资源介绍：这段代码实现了一组非常漂亮的流光溢彩的按钮，它使用伪类before和css实现。。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯css实现。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。
<!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>
100+评论
captcha
    相关资源
    类型标题大小时间
    ZIPexcel上导入使用的phpoffice包4.49MB10月前
    ZIP超级棒的Linux中文man离线手册1.19MB10月前
    ZIP最新AI智能问答AI绘画ChatGPT系统源码、TTS & 语音识别，文档分析、GPT-4o多模态识图理解20.28MB10月前
    ZIP吉林大学 微机原理及汇编语言 全80讲 主讲-赵宏伟 附辅导课 视频教程200B10月前
    ZIP1_2023级班级课表(1).zip69.28KB10月前
    ZIPAngry Birds v1.5.3.zip41.74MB10月前
    ZIPastah-community-7-1-0-f2c212.zip13.14MB10月前
    ZIPSTM32f103 GPIO应用代码3.47KB10月前