巧用HTML5给按钮背景设计不同的动画简单实例


Posted in HTML / CSS onAugust 09, 2016

如何巧用HTML5设计按钮背景不同动画特效,在该特效中,当鼠标滑过按钮时,使用CSS3   animation 来动画   background-size  和  background-position  属性,来实现各种背景动画效果。

下面来看一下整体的效果图:

巧用HTML5给按钮背景设计不同的动画简单实例

具体实现:

1. CSS样式

首先为按钮设置通用样式。将按钮的背景去除,设置2像素的实线边框,并将底部边框设置为4个像素。通过padding来设置按钮的尺寸,并为按钮的文字颜色设置平滑动画过渡效果。

巧用HTML5给按钮背景设计不同的动画简单实例

第一种按钮背景动画:

在第一种按钮背景动画中,按钮的背景使用2个渐变图层来制作。当鼠标滑过按钮时执行halftone帧动画,该动画修改按钮的background-size属性。它缩小了背景图片的尺寸,使所有的圆点连成一片。

巧用HTML5给按钮背景设计不同的动画简单实例

第二种按钮背景动画:

第二种按钮背景动画中,使用线性渐变作为按钮的背景图像。在鼠标滑过按钮时,通过修改按钮的background-position属性,使背景位置不断发生变化,形成斑马线运动效果

巧用HTML5给按钮背景设计不同的动画简单实例

第三种按钮背景动画:

第三种按钮背景动画中,使用花点渐变作为按钮的背景图像。在鼠标滑过按钮时,通过修改按钮的background-position属性,使背景位置不断发生变化,形成点运动效果。

巧用HTML5给按钮背景设计不同的动画简单实例

第四种按钮背景动画:

第四种按钮背景动画中,使用波浪变作为按钮的背景图像。在鼠标滑过按钮时,通过修改按钮的background-position属性,使背景位置不断发生变化,形成波浪动态运动效果。

巧用HTML5给按钮背景设计不同的动画简单实例

第五种按钮背景动画:

第五种按钮背景动画中,使用斜线变作为按钮的背景图像。在鼠标滑过按钮时,通过修改按钮的background-position属性,使背景位置不断发生变化,形成斜线运动效果。

巧用HTML5给按钮背景设计不同的动画简单实例

第六种按钮背景动画:

第六种按钮背景动画中,使用圆形闪动渐变作为按钮的背景图像。在鼠标滑过按钮时,通过修改按钮的background-position属性,使背景位置不断发生变化,形成圆形闪动效果。

巧用HTML5给按钮背景设计不同的动画简单实例

这就是六个按钮的每个效果和代码,除了这个css样式还可以使用一些标准的组件来制作。

以上这篇巧用HTML5给按钮背景设计不同的动画简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 #HTML / CSS
Html5元素及基本语法详解
Aug 02 #HTML / CSS
Html5 web本地存储实例详解
Jul 28 #HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 #HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 #HTML / CSS
浅谈HTML5 & CSS3的新交互特性
Jul 19 #HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 #HTML / CSS
You might like
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
php将html转为图片的实现方法
2017/05/19 PHP
javascript 变量作用域 代码分析
2009/06/26 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
如何更优雅地写python代码
2019/07/02 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
Python生成器常见问题及解决方案
2020/03/21 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
Python sorted对list和dict排序
2020/06/09 Python
python怎么判断素数
2020/07/01 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
应届大学生求职的自我评价
2013/11/17 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
十佳护士先进事迹
2014/05/08 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
植树造林的宣传标语
2014/06/23 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
歌舞青春观后感
2015/06/10 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
幼儿园教学反思范文
2016/03/02 职场文书