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

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

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

这个按钮效果主要使用 :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 - 多彩变化的按钮

本文永久链接地址：http://www.aww255.net/post/971.html

温馨提示

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

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

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

评论反馈或留言反馈；

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

可以直接加QQ（158695710）

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

爱普生清零软件步骤视频

栏目导航: 固件程序电脑网络维修清零软件其他硬件

最新文章

wps office 设置密码方法

WPS密码设置方法1WPS密码设置方法2Office密码设置方法1Office密码设置方法2...
Win10系统添加开机启动项的步骤

右击开始点运行或按下Win+R，弹出运行窗口输入shell:startup点确定跳出这个文件夹。C:\Users\Adm...
麒麟系统命令行常用快捷键介绍

基本快捷键如下：Ctrl+C：终止当前正在运行的命令。当命令卡住或不想继续执行时，可以使用此快捷键强制终止。Ctrl...
银河麒麟桌面操作系统进不去系统怎么备份用户数据 Livecd备份数据教程

编写人：张展鹏编写日期：2023/11/27一．操作前准备准备好系统盘和存放数据的光盘或者u盘（有网络的机器登录网页邮箱...
七类网线水晶头接法制作步骤教程图解

技发展越来越迅速，我们目睹了综合布线行业的更新迭代，最开始常用的五类线、超五类线渐渐被六类线、超六类、七类线所取代，今天...

热门文章

共享打印机错误0x000003e3解决方法

最近有的小伙伴在使用打印机的时候遇到了一系列的问题，有的是最新的更新补丁导致，有的却是其他原因。这不最近就有小伙伴问，自...
当前操作系统缺少OCR A Extended等字体，请及时安装所需字体或者重新安装正版操作系统软件，黑体解决方法

安装的航天信息开票软件无法打印，提示”“当前操作系统缺少OCRAExtended等字体…”，具体解决方法如下：打印发...
编译原理总结（《编译与反编译技术》）

编译原理总结（《编译与反编译技术》）转自CSDN编译原理总结思维导图引论什么是编译程序?编译过程都包括哪些阶段?画出编译...
带您快速了解开源/自由软件的历史

自由软件运动于1983年发起，但较早的项目符合...
VB窗体初始最大化和改变窗体大小自动缩放控件及字体

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

最近发表