使用CSS3点击按钮实现背景渐变动画的效果-css教程-PHP中文网

首页

web前端

css教程

使用CSS3点击按钮实现背景渐变动画的效果

不言

Jun 14, 2018 pm 05:22 PM

css3 按钮渐变背景

这篇文章给大家介绍的是，利用CSS3实现当点击按钮的时候，按钮的背景是渐变动画的效果，实现后的效果非常好，开发的时候利用这种效果的按钮会给用户一种非常酷炫的感受，感兴趣的朋友们下面来一起看看吧。

效果图如下：

实例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>css3给按钮添加背景渐变动画</title>
<!--
@author：SM
        @email:sm0210@qq.com
@desc：
        css3给按钮添加背景渐变动画
-->
<style type="text/css">
button {
color:#FFF;
font-size:16px;
outline:none;
width:300px;
height:48px;
background:#26A1D9;
border:none;
-webkit-border-radius:5px;
border-radius:5px;
}
button:active{
outline:none;
background:#208FC1;
/*执行动画*/
-webkit-animation:showBtn 0.5s 1;
animation:showBtn 0.5s 1;
/*停止在最后一帧*/
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
/*
定义动画
*/
@-webkit-keyframes showBtn{</p>
<p>10%{
background:-webkit-radial-gradient(Circle,#1E7AA5 28%, #2287B7 30%, #2287B7 48%,#208FC1 60%); 
background:radial-gradient(Circle,#1E7AA5 28%, #2287B7 30%, #2287B7 48%,#208FC1 60%); 
}</p>
<p>20%{
background:-webkit-radial-gradient(Circle,#1E7AA5 32%, #2287B7 34%, #2287B7 52%,#208FC1 60%);
background:radial-gradient(Circle,#1E7AA5 32%, #2287B7 34%, #2287B7 52%,#208FC1 60%); 
}</p>
<p>40%{
background:-webkit-radial-gradient(Circle,#1E7AA5 34%, #2287B7 36%, #2287B7 54%,#208FC1 60%);
background:radial-gradient(Circle,#1E7AA5 34%, #2287B7 36%, #2287B7 54%,#208FC1 60%);
}</p>
<p>60%{
background:-webkit-radial-gradient(Circle,#1E7AA5 36%, #2287B7 38%, #2287B7 56%,#208FC1 60%);
background:radial-gradient(Circle,#1E7AA5 36%, #2287B7 38%, #2287B7 56%,#208FC1 60%);
}</p>
<p>80%{
background:-webkit-radial-gradient(Circle,#1E7AA5 38%, #2287B7 40%, #2287B7 58%,#208FC1 60%);
background:radial-gradient(Circle,#1E7AA5 38%, #2287B7 40%, #2287B7 58%,#208FC1 60%);
}</p>
<p>100%{
background:-webkit-radial-gradient(Circle,#1E7AA5 40%, #2287B7 42%, #2287B7 60%,#208FC1 60%);
background:radial-gradient(Circle,#1E7AA5 40%, #2287B7 42%, #2287B7 60%,#208FC1 60%);
}
}
</style>
</head>
<body>
<button>按钮</button></p>
<p></body>
</html>

登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

热AI工具

热工具

热门话题

Java教程

1655

CakePHP 教程

1414

Laravel 教程

1307

PHP教程

1253

C# 教程

1227

显示更多

Related knowledge

在 Windows 中禁用传递优化服务的 5 种方法 May 17, 2023 am 09:31 AM

许多原因可能使你想要禁用传递优化服务在你的Windows电脑上。但是，我们的读者抱怨不知道要遵循的正确步骤。本指南将通过几个步骤讨论禁用传递优化服务的方法。要了解有关服务的更多信息，您可能需要查看我们的如何打开services.msc指南以获取更多信息。传递优化服务有什么作用？传递优化服务是具有云托管解决方案的HTTP下载程序。它允许Windows设备从备用来源下载Windows更新、升级、应用程序和其他大型包文件。此外，它还通过允许部署中的多个设备下载这些包来帮助减少带宽消耗。此外，Windo

如何重启、强制重启和关闭 iPad Mini 6 Apr 29, 2023 pm 12:19 PM

如何强制重启iPadMini6强制重启iPadMini6是通过一系列按钮按下来完成的，它的工作原理如下：按下并释放音量调高按下并释放降低音量按住电源/锁定按钮，直到您在屏幕上看到Apple标志，表明iPadMini已强制重启仅此而已，您已经强制重启了iPadMini6！强制重启通常用于故障排除原因，例如iPadMini被冻结、应用程序被冻结或发生其他一些一般性不当行为。关于强制重启第6代iPadMini的程序需要注意的一点是，对于所有其他具有超薄边框并使用

重写后：如何解决 PS5 控制器在 Windows 11 上未被识别的问题 May 09, 2023 pm 10:16 PM

关于连接我的PS5控制器，我应该知道什么？与DualSense控制器一样好，有报告称控制器未连接或未被检测到。解决此问题的最简单方法是使用适当的USB电缆将控制器连接到您的PC。有些游戏本身就支持DualSense。在这些情况下，您只需插入控制器即可。但这引发了其他问题，例如如果您没有USB电缆或不想使用USB电缆怎么办

OneNote如何设置图片为背景 May 14, 2023 am 11:16 AM

Onenote是Microsoft提供的最好的笔记工具之一。结合Outlook和MSTeams，Onenote可以成为提高工作和个人创意工作效率的强大组合。我们必须以不同的格式做笔记，这可能不仅仅是把事情写下来。有时我们需要从不同来源复制图像并在日常工作中进行一些编辑。如果知道如何应用更改，则粘贴在Onenote上的图像可以发挥很大作用。您在使用Onenote时是否遇到过粘贴在Onenote上的图像无法让您轻松工作的问题？本文将着眼于在Onenote上有效地使用图像。我们可

更改 Windows 11 上的电源按钮操作 [5 提示] Sep 29, 2023 pm 11:29 PM

电源按钮可以做的不仅仅是关闭PC，尽管这是桌面用户的默认操作。如果您想更改Windows11中的电源按钮操作，它比您想象的要容易！请记住，物理电源按钮与“开始”菜单中的按钮不同，下面的更改不会影响后者的操作。此外，您会发现电源选项略有不同，具体取决于它是台式机还是笔记本电脑。为什么要在Windows11中更改电源按钮操作？如果您让计算机进入睡眠状态的频率高于关闭计算机，则更改硬件电源按钮（即PC上的物理电源按钮）的行为方式即可。同样的想法也适用于休眠模式或简单地关闭显示器。更改Windows11

iOS 17：如何在'信息”中组织iMessage应用程序 Sep 18, 2023 pm 05:25 PM

在iOS17中，苹果不仅增加了几个新的消息功能，而且还调整了消息应用程序的设计，使其外观更干净。现在，所有iMessage应用程序和工具（如相机和照片选项）都可以通过点击键盘上方和文本输入字段左侧的“+”按钮来访问。点击“+”按钮会弹出一个菜单列，该列具有默认的选项顺序。从顶部开始，有相机，照片，贴纸，现金（如果可用），音频和位置。最底部是一个“更多”按钮，点击该按钮时会显示任何其他已安装的消息应用程序（您也可以向上滑动以显示此隐藏列表）。如何重新组织您的iMessage应用程序您可以通过以下方

如何使用Vue实现按钮倒计时特效 Sep 21, 2023 pm 02:03 PM

如何使用Vue实现按钮倒计时特效随着Web应用程序的日益普及，我们经常需要在用户与页面进行交互时使用一些动态效果来提升用户体验。其中，按钮的倒计时特效是非常常见且实用的一种效果。本文将介绍如何使用Vue框架来实现按钮倒计时特效，并给出具体的代码示例。首先，我们需要创建一个Vue组件，包含一个按钮和倒计时的功能。在Vue中，组件是一种可复用的Vue实例，视图会

如何重置 Xbox Series S 或 X 的控制器 Jun 03, 2023 pm 08:19 PM

Xbox游戏机是游戏玩家的最爱。有了新的SeriesX和SeriesS，游戏几乎是一种栩栩如生的体验。Xbox的控制器是体验游戏效果的主要工具。有时控制器连接被切断或在尝试将控制器连接到主控制台时遇到一些错误。这可能是由于与配对相关的各种问题。这可以通过几个简单的步骤来克服。重置XboxSeriesS或XboxSeriesX的控制器第1步：按住控制器上的Xbox按钮几秒钟，关闭控制器。第2步：在屏幕上，转到关闭控制器，然后按按钮A选择该选项。注意：如果您一直按X

See all articles

使用CSS3点击按钮实现背景渐变动画的效果

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题