巧用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 相关文章推荐
css3 transform属性详解
Sep 30 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
纯html+css实现Element loading效果
Aug 02 HTML / CSS
使用CSS连接数据库的方式
Feb 28 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 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网站基础优化方法小结
2008/09/29 PHP
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
Python常用模块介绍
2014/11/21 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
高考考python编程是真的吗
2020/07/20 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
感恩母亲节活动方案
2014/03/04 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
学习经验演讲稿
2014/05/10 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
岳庙导游词
2015/02/04 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android