这篇文章给大家介绍的是，利用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>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
使用css如何让背景图片拉伸填充避免重复显示
css3的图层阴影和文字阴影的使用
用css3实现图片翻转效果
以上就是使用css3点击按钮实现背景渐变动画的效果的详细内容。