当前位置：首页 > 维修资料 > 电脑网络维修 > 正文

有趣的CSS - 多彩变化的按钮

aww255 发布于2024-03-08 19:08:02 电脑网络维修 697 次 0

这个按钮效果主要使用 :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

打赏

分享到：

查看更多有关于 #CSS #多彩变化 #按钮的文章。

转载请注明来源：有趣的CSS - 多彩变化的按钮

本文永久链接地址：https://aww255.com/post/971.html

温馨提示

付款后看不到下载链接；网盘链接失效；

清零软件无法使用；下载文件不对；

版权侵权，收到后第一时间删除

评论反馈或留言反馈；

退款补发，100M内文件可以发邮件。

可以直接加QQ（158695710）

邮箱：awwoffice@qq.com或158695710@qq.com

爱普生清零软件步骤视频

发表评论已有 0 评论

栏目导航: 固件程序电脑网络维修清零软件其他硬件打印机维修兄弟案例爱普生案例惠普案例奔图案例理光案例施乐案例佳能案例柯美案例夏普案例东芝案列京瓷案例得力案例联想案例

最新文章

Python 实现一个简单的中文分词处理？

在Python中，实现一个简单的中文分词处理，我们可以采用基于规则的方法，比如最大匹配法、最小匹配法、双向匹配法等。但更...
有趣的CSS - 多彩变化的按钮

这个按钮效果主要使用 :hover 、:active 伪选择器以及 animat...
$让电脑盘符右键中的格式化不起作用——WIN10\WIN8.1测试通过$

让电脑盘符右键中的格式化不起作用——WIN10\WIN8.1测试通过

以下内容有不妥之处，敬请指正。一、查看当前电脑登录的用户名称按下键盘上的Win+R组合键，打开运行对话框。输入cmd并按...
Windows 11 上应禁用的 15 项功能

Windows11具有大量特性和功能，可满足广泛的用户需求。然而，并非所有这些功能都是普遍必要或理想的。 ...
编译原理总结（《编译与反编译技术》）

编译原理总结（《编译与反编译技术》）转自CSDN编译原理总结思维导图引论什么是编译程序?编译过程都包括哪些阶段?画出编译...

热门文章

当前操作系统缺少OCR A Extended等字体，请及时安装所需字体或者重新安装正版操作系统软件，黑体解决方法

安装的航天信息开票软件无法打印，提示”“当前操作系统缺少OCRAExtended等字体…”，具体解决方法如下：打印发...
带您快速了解开源/自由软件的历史

自由软件运动于1983年发起，但较早的项目符合...
H.266编码和H.264 H.265编码有什么区别

相信经常看视频的朋友应该都听说过H.264/AVC、H.265/HEVC这类词语，其实这是视频编码标准，主要作用是将视频...
编译原理总结（《编译与反编译技术》）

编译原理总结（《编译与反编译技术》）转自CSDN编译原理总结思维导图引论什么是编译程序?编译过程都包括哪些阶段?画出编译...
VB窗体初始最大化和改变窗体大小自动缩放控件及字体

1、模块代码：'标准模块声明写入(自定义类型)Type cp ...

最近发表

有趣的CSS - 多彩变化的按钮

核心代码

html 代码

<button>戳一下</button>

css 部分代码

完整代码如下

html 页面

css 样式

发表评论 已有 0 评论

发表评论已有 0 评论