-
下面看看整体效果。
具体的实现：
1。CSS样式
首先，设置按钮的一般样式。删除按钮的背景，设置2像素的实线边框，并将底部边框设置为4像素。按钮的大小是通过填充设置的，并为按钮的文本颜色设置平滑的动画过渡效果。
第一个按钮背景动画：
在第一个按钮背景动画中，按钮的背景是由2个渐变层构成的，当鼠标通过按钮滑动时，就会执行半色调帧动画，它修改了按钮的背景尺寸属性，减少了背景图片的大小，使所有点都在一起。
第二种按钮背景动画：
在第二个按钮背景动画中，使用线性渐变作为按钮的背景图像，当鼠标滑过按钮时，对按钮的背景位置属性进行修改，使背景位置不断变化，形成斑马线运动效果。
第三种按钮背景动画：
在第三个按钮的背景动画中，以花点渐变作为背景图像，当鼠标通过按钮时，通过修改按钮的背景位置属性改变背景位置，形成点运动效果。
第四种按钮背景动画：
在第四个按钮的背景动画中，用一个按钮的背景图像作为波的变化，当鼠标通过按钮时，修改了按钮的背景位置属性，使背景位置不断变化，形成了波的动态运动效应。
第五种按钮背景动画：
在第五个按钮的背景动画中，斜线作为按钮的背景图像，当鼠标通过按钮时，按钮的背景位置属性被修改，使背景位置不断变化，形成斜线运动效果。
第六种按钮背景动画：
在第六个按钮的背景动画中，以圆形渐变渐变作为按钮的背景图像，当鼠标通过按钮滑动时，通过修改按钮的背景位置属性改变背景位置，形成圆形闪烁效果。
这是六个按钮的每一个效果和代码，除了CSS样式之外，还可以用一些标准组件制作。
以上是使用HTML5为按钮背景设计不同动画的一个很好的例子。简单的例子是，萧边分享了你的全部内容。我希望能给你一个参考，希望你能支持它。