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


Posted in HTML / CSS onOctober 19, 2016

效果图如下:

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>

总结
以上就是利用CSS3点击按钮的时候,实现背景渐变动画的效果,感兴趣的朋友们可以自己运行下代码看看效果,这样更有助于理解,希望这篇文章的内容对大家的学习或者工作能带来一定的帮助。

HTML / CSS 相关文章推荐
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 #HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 #HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 #HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 #HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 #HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 #HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 #HTML / CSS
You might like
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
介绍Python中的文档测试模块
2015/04/28 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
EJB timer的种类
2014/10/28 面试题
销售行业个人求职自荐信
2013/09/25 职场文书
金融行业务员的自我评价
2013/12/13 职场文书
见习报告格式要求
2014/11/04 职场文书
2015年工程师工作总结
2015/04/30 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP
MySQL 数据库范式化设计理论
2022/04/22 MySQL
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技