HTML中button怎么填充GIF,css3给按钮添加背景渐变动画

css3给按钮添加背景渐变动画

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{

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%);

}

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%);

}

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%);

}

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%);

}

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%);

}

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%);

}

}

按钮

效果:

d82a66c5576f

6631610924442671787.gif

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/345875.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[渝粤题库]陕西师范大学《幼儿园语言教育》作业

《幼儿园语言教育》作业 一、填空题 1、儿童语言的发展是指儿童对母语的理解和 能力随着时间的推移而发生变化的过程和现象。 2、儿童获得语言之前,用语音及伴随的表情或动作代替语言进行交往的现象被称为 。 3、 是指交际双方根据交际目…

[渝粤题库]陕西师范大学《商业银行经营学》作业

《商业银行经营学》作业 一 、名词解释 1.商业银行外部组织形式 2.单一银行制 3.银行控股公司制 4.合业经营 5.自有资本 6.可转让定期存单(CD) 7.自动转账服务账户(ATS) 8.回…

导数,微分,偏导,全微分,方向导数,梯度

多元函数与一元函数有一个很大的区别在于定义域的不同:一元函数自变量就在x轴上,因此趋近的方向只有某点的左右两侧,因此,考察一元函数极限的时候,仅考虑左邻域和右邻域即可。但是多变量微分变得复杂,趋向方…

html5贝塞尔,使用HTML5画布绘制贝塞尔曲线

是的,请使用HTML canvasbezierCurveTo()方法在HTML5中绘制Bezier曲线。示例您可以尝试运行以下代码以使用画布绘制贝塞尔曲线:HTML>#test {width: 100px;height:100px;margin: 0px auto;}function drawShape(){//使用DOM获取canvas元素var canvas do…

[渝粤题库]陕西师范大学《幼儿园课程》(专科)作业

《幼儿园课程》(专科)作业 一、单选题 1、活动课程是以( )为中心来组织学习内容的。 A 学科 B 问题 C 概念 D 儿童 2、( )指的…

perl大骆驼和小骆驼_骆驼路线的主/从故障转移

perl大骆驼和小骆驼一种实现主/从故障转移模式的方法是拥有一个应用程序的实例集群,其中一个实例(主实例)当前处于活动状态,而其他实例(从属实例)处于待机状态,随时可以在主实例发生故障时接管该…

牛顿法, Jacobian矩阵 和 Hessian矩阵

牛顿法 主要有两方面的应用: 求方程的根;求解最优化方法; 为什么要用牛顿法求方程的根? 问题很多,牛顿法 是什么?目前还没有讲清楚,没关系,先直观理解为 牛顿法是一种迭代求解方法…

[渝粤题库]陕西师范大学《幼儿保健学》作业

《幼儿保健学》作业 单选题 1、人一生总共( )块腕骨。 A 6 B 7 C 8 D 9 2、营养学中常用的能量单位是( )。 A 千卡 B 焦耳 C 瓦特 …

微型计算机组装实验报告虚拟,计算机硬件的组装实验报告.doc

计算机硬件的组装实验报告.doc计 算 机 硬 件 的 组 装 实验时间3月30日晚600-900 学号 姓名 一、实验目的1.加深对理论知识的理解,提高实际动手能力;2.了解计算机的主要部件,理解各部件的功能,了解微型机的各项技术指标和参数。3…

[渝粤教育】陕西师范大学《教育社会学》作业

《教育社会学》作业 一、 单项选择题 1.从研究对象上讲,教育社会学探究的主要是 A.广义教育 B.中观教育 C.狭义教育 D.社会教育 2.教育社会对自身以外的其他社会现象所发生的功能是 …

奇异矩阵,非奇异矩阵,伪逆矩阵

奇异矩阵就是Singular Matrix 的中文翻译。 Singular 就是唯一的,可以想成是单身狗,所以他没有对象 逆矩阵。 Non-singular的非奇异矩阵就是Couple 有逆矩阵。 奇异矩阵 奇异矩阵是线性代数的概念,就是对应的行列式等于0的矩阵。 奇异矩阵…

ActiveMQ性能测试

我们使用ActiveMQ作为消息传递层–发送大量需要低延迟的消息。 通常它可以正常工作,但是在某些情况下我们遇到了性能问题。 在花了太多时间测试我们的基础架构之后,我想我已经学到了有关ActiveMQ的一些有趣的东西:它可能真的很慢。 尽管一般…

计算机网络严楠,安徽工程大学

安徽工程大学是一所以工为主的省属多科性高等院校,是安徽省高校综合改革首批试点院校、安徽省系统推进全面创新改革试验高校创新自主权改革试点单位,入选教育部新工科研究与实践项目。 学校办学历史始于1935年创设的安徽私立内思高级工校,历经…

渝粤教育 陕西师范大学 《JAVA程序设计》作业

《JAVA程序设计》作业 一、选择题 编译HelloWorld.java的正确命令是: java HelloWorld.class B)java HelloWorld.java C)javac HelloWorld.java正确运行HelloWorld.java的正确命令是: java HelloWorld B)javac HelloWorld.java C&#…

垃圾收集算法,垃圾收集器_垃圾收集器准则和提示

垃圾收集算法,垃圾收集器这些是我需要调整GC时通常会看到的一些准则和技巧。 主要由以下两本书组成,而根据我的经验却很少: Java性能 JBoss AS 5性能调优 希望它们对在那里的其他人有用! 垃圾收集器 XX:AggressiveOpts将HotSpot内部布尔变…

【渝粤题库】陕西师范大学 《道德教育案例研究》作业

《道德教育案例研究》作业 一、单选题 1.“在集体中进行教育的原则”是教育家(      )首先提出的 。  A 、马卡连柯   B 、赞科夫   C 、苏霍姆林斯基   D、 加里宁 2.现代德育在德育方法上(      &#xff0…

小自考计算机专业代码,自学考试有关专业分类及其代码

(摘自考委21号文件:高等教育自学考试专业及课程代码)专科:一级学科二级学科专 业工学08管理工程类0822计算机信息管理082207, 管理工程082201,工业外贸082203, 技术监督管理082204,建筑经济管理082209&…

3SAT问题

3-Satisfiability (3Sat) https://samjjx.github.io/2019/03/14/3sat2ds/

渝粤教育 陕西师范大学 《证券投资学[专升本]》作业

《证券投资学[专升本]》作业 一、名词解释 1.股份有限 2.股票 3.利润表(损益表) 4.市盈率 5. 公司债 6.股票现货交易 7.应收账款周转率 8.移动平均线 二、单选题 1、进入证券市场进行证券买卖的各类投资者即…

Java,JavaFX的流利设计风格文本字段和密码字段

我刚刚发布了Java版本4.5 ,JavaFX主题JMetro 。 此版本为“文本字段”和“密码字段”添加了新样式。 和往常一样,受到Fluent Design的启发。 在这篇文章中,我将详细介绍这个新版本。 JMetro版本4.5 就像我在简介中所说的那样,JM…