《CSS实现图片翻转效果》由会员分享，可在线阅读，更多相关《CSS实现图片翻转效果（2页珍藏版）》请在金锄头文库上搜索。
1、这个效果实现其实非常简单，第一步：准备两个图片，大小完全相同即可，这里是128X34 像素。左边这个是通常状态时的图片，叫 background.gif，右边这个市鼠标经过时的图片，叫 background-hover.gif。 第二步，写 HTML 部分的代码：Button Text复制代码就是一个非常普通的超链接文本，如果希望完全使用图片而不是用任何文字，也可以。 第三步：CSS 部分的代码是这样的：a:link, a:visiteddisplay:block;width:128px;height:34px;font-size:14px;font-family:Arial;line-hei
2、ght:34px;text-align:center;color:black;text-decoration:none;background:url(background.gif) no-repeat;a:hover, a:activebackground:url(background-hover.gif) no-repeat; color:white;复制代码好了，这个效果就完成了，是不是非常简单。下面简单解释一下 CSS 代码的含义。 第114行代码是定义鼠标没有经过超链接时的 CSS 样式： 首先要把 a 元素变为块级元素，然后设定它的高度和宽度与图片相同。 然后是文字放到图片的中心位置。 最后设定背景图像的地址。 接下来的第1619行代码定义鼠标经过时所需要变化的 CSS 样式。把文字的颜色由黑色变为白色，并把图片换成另一个图片即可了。
