有趣的CSS - 多彩变化的按钮
作者:米爸爸发布时间:2024-03-08分类:电脑网络维修浏览:374评论: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
打赏
收藏
点赞
你 发表评论:
欢迎- 电脑网络维修排行
-
随机文章
热评文章
热门文章
-
夜的命名术有声小说全集_有声的紫襟|树袋熊播讲2023-04-16 阅读(1728)
-
兄弟打印机MFC8530_8535_8540DN-ASC中文维修手册 通用 联想 M8600DN M8650DN M8900DNF M8950DNF2023-04-18 阅读(945)
-
柯美 柯尼卡美能达 bizhub 266 306 黑白复印机中文维修手册2023-04-25 阅读(872)
-
中文维修手册 兄弟DCP9055CDN_MFC9465CDN维修手册2023-05-06 阅读(572)
-
兄弟DCP9020CDN_MFC9140CDN_9340CDWDCP9010CN-MFC9120CN-9320CW中文维修手册2023-05-08 阅读(554)
-
爱普生清零软件L4151 L4153 L4156 L4158 L4163 L4165 L4166 l4167 L4168 L4169绿色 内有图解2023-05-13 阅读(788)
-
柯美 柯尼卡美能达 bizhub C286i C266i C226i 彩色复印机中文维修手册2023-05-26 阅读(962)
-
惠普 M154 M180 M181 M254 M280 M281 彩色打印机中文维修手册和故障排除2023-05-28 阅读(729)
-
爱普生清零软件epsonL4260L4263L4265L4266L4267L4268L4269含教程2023-05-29 阅读(1731)
-
爱普生清零软件Reset_Epson_L31102023-06-01 阅读(840)
-
东芝 2555C 3055C 3555C 4555C 5055C 复印机中文便携服务维修代码手册2023-06-04 阅读(522)
-
爱普生清零软件Epson L655 (ESP)2023-06-07 阅读(633)
-
夏普MX-363、453、503等机器出现H5-01故障代码2023-06-10 阅读(458)
-
微软语音合成工具 3.1 新2023-06-17 阅读(809)
-
惠普中文故障代码手册 HP MFP E77822 E77825 E77830 彩色复印机2023-06-19 阅读(458)
-
60套进销存管理系统excel表格模板免费下载2023-06-07 阅读(1392)
-
永隆新版固定资产管理软件系统单机免费增强版2023-05-30 阅读(1828)
-
爱普生L805 原版epson清零软件2023-05-29 阅读(1045)
-
文件视频图片修复工具 Wondershare Repairit (万兴)v4.0.5.4 破解版(附破解补丁)2023-04-18 阅读(1800)
-
门诊电子处方软件4.0( 内含注册码)打印系统2023-07-01 阅读(680)
-
兄弟彩色喷墨打印机 DCP-T220T420WT425WT428WT520WT720DWT725DWT820DWMFC-T920DW中文维修手册2023-05-08 阅读(1316)
-
爱普生清零软件EPSON_L13002023-05-30 阅读(706)
-
129个奔图维修手册2023-04-28 阅读(1439)
-
柯美 柯尼卡美能达 bizhub C286i C266i C226i 彩色复印机中文维修手册2023-05-26 阅读(962)
-
柯尼卡美能达 柯美 bizhub C266 C226 C256 彩色复印机维修手册2023-05-26 阅读(1091)
-
爱普生ME offce ME1100中文版 清零软件2023-12-21 阅读(588)
-
傲软视频下载王 Apowersoft Video Download v6.5.0 绿色破解版2023-11-15 阅读(405)
-
HitPaw Watermark Remover 2.3.0.8视频图片AI去水印免费中文2023-09-13 阅读(597)
-
柯美 柯尼卡美能达 bizhubC650i C550i C450i C750i 750i 彩色复印机中文维修手册2023-06-01 阅读(777)
-
全系列打印机复印机1280本维修手册维修资料拆机手册合集2023-05-25 阅读(1764)
-
富士施乐S2011 S2110 S1810 2150 2350 2520 网络IP地址设置方法2023-04-15 阅读(16488)
-
柯尼卡美能达复印机bizhub C226/C266系列扫描功能设置步骤(内有ftp utilitystup下载)2023-04-25 阅读(13041)
-
大奉打更人有声小说全集-头陀渊-大斌-丸子播讲2023-04-23 阅读(6736)
-
东芝2010AC 2110ac复印机 出现CD40故障 废粉盒满了2023-04-13 阅读(6042)
-
富士施乐复印机提示更换定影组件R8 清零 解决方案2023-05-26 阅读(3281)
-
兄弟T420 T425w喷墨一体机清洗打印头设置方法2023-04-15 阅读(3147)
-
凡人修仙传有声小说全集_大灰狼播讲免费下载2023-04-15 阅读(2906)
-
富士施乐系列xerox SC2022 进入维修模式方法2023-04-21 阅读(2719)
-
富士施乐s2110 s2011 s1810系列机器载体初始化步骤2023-05-02 阅读(2104)
-
佳能全系列型号清零软件超级版2023最新版永久可复制万能版本V22023-06-04 阅读(2048)
-
凡人修仙之仙界篇有声小说全集_大灰狼播讲(经典玄幻修仙)免费下载2023-04-15 阅读(2040)
-
中控考勤机软件安装包-Zktime5.0考勤软件(新界面风格体温版本)2023-04-17 阅读(1915)
-
永隆新版固定资产管理软件系统单机免费增强版2023-05-30 阅读(1828)
-
文件视频图片修复工具 Wondershare Repairit (万兴)v4.0.5.4 破解版(附破解补丁)2023-04-18 阅读(1800)
-
全系列打印机复印机1280本维修手册维修资料拆机手册合集2023-05-25 阅读(1764)
- 网站分类
- 标签列表
-