HTML5简单又实用的按钮动画.pdf

HTML5简单又实⽤的按钮动画 　　⾸先来看⼀下整体的效果图： 　　看了动画效果之后⼤家应该⾮常关⼼他是如何 现的,现在就给⼤家具体讲讲他的 现技巧. 　　具体 现 　　1. CSS样式 　　⾸先为按钮设置通⽤样式。将按钮的背景去除，设置2像素的 线边框，并将底 部边框设置为4个像素。通过padding来设置按钮的尺⼨，并为按钮的⽂字颜⾊设置平 滑动画过渡效果。 　　第⼀种按钮背景动画 　　在第⼀种按钮背景动画中，按钮的背景使⽤2个渐变图层来制作。当⿏标滑过按 钮时执⾏halftone帧动画，该动画修改按钮的background-size属性。它缩⼩了背景图⽚ 的尺⼨，使所有的圆点连成⼀⽚。 　　第⼆种按钮背景动画 　　第⼆种按钮背景动画中，使⽤线性渐变作为按钮的背景图像。在⿏标滑过按钮 时，通过修改按钮的background-position属性，使背景位置不断发⽣变化，形成斑马线 运动效果。 　　第三种按钮背景动画 　　第三种按钮背景动画中，使⽤花点渐变作为按钮的背景图像。在⿏标滑过按钮 时，通过修改按钮的background-position属性，使背景位置不断发⽣变化，形成点运动 效果。 　　第四种按钮背景动画 　　第四种按钮背景动画中，使⽤波浪变作为按钮的背景图像。在⿏标滑过按钮时， 通过修改按钮的background-position属性，使背景位置不断发⽣变化，形成波浪动态运 动效果。 　　第五种按钮背景动画 　　第五种按钮背景动画中，使⽤斜线变作为按钮的背景图像。在⿏标滑过按钮时， 通过修改按钮的background-position属性，使背景位置不断发⽣变化，形成斜线运动效 果。 　　第六种按钮背景动画 　　第六种按钮背景动画中，使⽤圆形闪动渐变作为按钮的背景图像。在⿏标滑过按 钮时，通过修改按钮的background-position属性，使背景位置不断发⽣变化，形成圆形 闪动效果。 　　6种样式设置好了,我们再来看看HT L⾥⾯具体结构是怎么样的. 　　2. HT L结构 　　该按钮效果使⽤标准的组件来制作。 　　这样我们就完成了,现在我们再看⼀下他的静态图. 　　3. 与iOS交互 现 　　代码如下: 　　效果图 W3Cschool （）最⼤的技术知识分享与学习平台 此篇内容来⾃ ⽹站⽤户上传并发布。