今天小编跟大家讲解下有关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><[email protected]：SM @email:[email protected]@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>
总结以上就是利用CSS3点击按钮的时候 实现背景渐变动画的效果 感兴趣的朋友们可以自己运行下代码看看效果 这样更有助于理解 希望这篇文章的内容对大家的学习或者工作能带来一定的帮助。
来源：爱蒂网
