有趣的CSS - 多彩变化的按钮
作者：米爸爸发布时间：2024-03-08分类：电脑网络维修浏览：352评论：0
导读：这个按钮效果主要使用 :hover 、:active 伪选择器以及 animation 、transition 属性来让...
这个按钮效果主要使用
:hover、:active伪选择器以及animation、transition属性来让背景色循环快速移动形成视觉效果。
核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。
核心代码
html 代码
<button>戳一下</button>
写上主体
button标签。
css 部分代码
button{
width: 140px;
height: 46px;
font-size: 16px;
font-weight: 700;
color: black;
border: 2px solid #ffffff;
border-radius: 10px;
background-color: #4158D0;
background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 17%, #e6a731 39%, #8329e2 60%, #3fb75f 80%, #4158D0 100%);
box-shadow: 0 0 0 2px #000000;
cursor: pointer;
transition: all 0.5s ease;}button:hover{
color: #ffffff;
animation: quick 0.5s linear infinite; /* 设置动画参数且循坏播放 */}@keyframes quick{
to {
background-position: 140px 0; /* 这里的X轴的值等于button的宽度 */
}}button:active{
transform: translateY(1px);}css 部分主要通过
:hover伪选择器判断鼠标悬浮时，设置animation参数让背景色沿 X 轴循环移动。
注意这里变化的
background-positon部分的 X 轴值等于按钮宽度，即140px，这样动画循环播放时就不会造成视觉断层。
完整代码如下
html 页面
<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>多彩变化的按钮</title> </head> <body> <div class="app"> <button>戳一下</button> </div> </body></html>
css 样式
/** style.css **/.app{
width: 100%;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;}button{
width: 140px;
height: 46px;
font-size: 16px;
font-weight: 700;
color: black;
border: 2px solid #ffffff;
border-radius: 10px;
background-color: #4158D0;
background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 17%, #e6a731 39%, #8329e2 60%, #3fb75f 80%, #4158D0 100%);
box-shadow: 0 0 0 2px #000000;
cursor: pointer;
transition: all 0.5s ease;}button:hover{
color: #ffffff;
animation: quick 0.5s linear infinite;}@keyframes quick{
to {
background-position: 140px;
}}button:active{
transform: translateY(1px);}以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。
转自51cto
打赏
收藏
点赞
欢迎 你 发表评论:
- 电脑网络维修排行
-
随机文章
热评文章
热门文章
-
2021-2022学年苏教版三年级下册期中模拟测试数学试卷2023-04-15 阅读（969） -
BarTender条码打印软件 10.1中文破解版(附破解补丁)2023-04-15 阅读（1053） -
凡人修仙传有声小说全集_大灰狼播讲免费下载2023-04-15 阅读（2902） -
ToDesk一款非常好用的电脑远控制软件2023-04-15 阅读（963） -
兄弟打印机中文维修手册-DLL-HL2260-2260D-2560DN2023-04-19 阅读（771） -
柯尼卡美能达7718提示维修呼叫(m2)故障维修召唤M2处理方法2023-04-19 阅读（852） -
庆余年有声小说全集_广场舞大妈播讲2023-04-20 阅读（570） -
夏普AR-2048 2348-4黑白复印机复合机故障代码解释2023-04-24 阅读（920） -
兄弟传真一体机FAX2890_2990_MFC7290中文维修手册+说明书2023-04-28 阅读（496） -
HTML5吃豆人游戏和源码2023-04-29 阅读（549） -
兄弟中文 MFC6510DW-MFCJ6710DW_J6910DW维修手册2023-05-06 阅读（515） -
爱普生L805 原版epson清零软件2023-05-29 阅读（1042） -
特殊符号大全2023-05-29 阅读（1379） -
文件搜索软件Everything高效搜索神器文件和文件夹的搜索工具2023-05-30 阅读（416） -
爱普生清零软件Epson L810-850 (EAI)2023-06-01 阅读（586）
-
60套进销存管理系统excel表格模板免费下载2023-06-07 阅读（1388） -
永隆新版固定资产管理软件系统单机免费增强版2023-05-30 阅读（1802） -
爱普生L805 原版epson清零软件2023-05-29 阅读（1042）
-
文件视频图片修复工具 Wondershare Repairit （万兴）v4.0.5.4 破解版（附破解补丁）2023-04-18 阅读（1792） -
门诊电子处方软件4.0（ 内含注册码）打印系统2023-07-01 阅读（677） -
兄弟彩色喷墨打印机 DCP-T220T420WT425WT428WT520WT720DWT725DWT820DWMFC-T920DW中文维修手册2023-05-08 阅读（1311） -
爱普生清零软件EPSON_L13002023-05-30 阅读（702） -
129个奔图维修手册2023-04-28 阅读（1431） -
柯美 柯尼卡美能达 bizhub C286i C266i C226i 彩色复印机中文维修手册2023-05-26 阅读（957） -
柯尼卡美能达 柯美 bizhub C266 C226 C256 彩色复印机维修手册2023-05-26 阅读（1088） -
爱普生ME offce ME1100中文版 清零软件2023-12-21 阅读（586） -
傲软视频下载王 Apowersoft Video Download v6.5.0 绿色破解版2023-11-15 阅读（401） -
HitPaw Watermark Remover 2.3.0.8视频图片AI去水印免费中文2023-09-13 阅读（594） -
柯美 柯尼卡美能达 bizhubC650i C550i C450i C750i 750i 彩色复印机中文维修手册2023-06-01 阅读（770） -
全系列打印机复印机1280本维修手册维修资料拆机手册合集2023-05-25 阅读（1743）
-
富士施乐S2011 S2110 S1810 2150 2350 2520 网络IP地址设置方法2023-04-15 阅读（16474） -
柯尼卡美能达复印机bizhub C226/C266系列扫描功能设置步骤（内有ftp utilitystup下载）2023-04-25 阅读（13033） -
大奉打更人有声小说全集-头陀渊-大斌-丸子播讲2023-04-23 阅读（6723） -
东芝2010AC 2110ac复印机 出现CD40故障 废粉盒满了2023-04-13 阅读（6005） -
富士施乐复印机提示更换定影组件R8 清零 解决方案2023-05-26 阅读（3154） -
兄弟T420 T425w喷墨一体机清洗打印头设置方法2023-04-15 阅读（3138） -
凡人修仙传有声小说全集_大灰狼播讲免费下载2023-04-15 阅读（2902）
-
富士施乐系列xerox SC2022 进入维修模式方法2023-04-21 阅读（2711） -
富士施乐s2110 s2011 s1810系列机器载体初始化步骤2023-05-02 阅读（2081） -
凡人修仙之仙界篇有声小说全集_大灰狼播讲（经典玄幻修仙）免费下载2023-04-15 阅读（2031） -
佳能全系列型号清零软件超级版2023最新版永久可复制万能版本V22023-06-04 阅读（2020） -
中控考勤机软件安装包-Zktime5.0考勤软件（新界面风格体温版本）2023-04-17 阅读（1908） -
永隆新版固定资产管理软件系统单机免费增强版2023-05-30 阅读（1802）
-
文件视频图片修复工具 Wondershare Repairit （万兴）v4.0.5.4 破解版（附破解补丁）2023-04-18 阅读（1792）
-
全系列打印机复印机1280本维修手册维修资料拆机手册合集2023-05-25 阅读（1743）
- 网站分类
- 标签列表
-
