Html+Css 链接状态变换的单图片实现（精通CSS高级WEB解决方案）读书笔记

来源：互联网发布：截屏录像软件编辑：程序博客网时间：2024/05/16 12:21

需求链接, 在点击,悬浮,访问过后需要进行图片的变换。

常规做法; 利用伪类选择器，创建多个图片，在悬浮，点击的时候切换不同的图片

高级：上面做法存在一定缺陷，换图的时候可能出现闪烁

下面讲解pixey 图片切换法

（将多种状态放在一张图片中, 进行切换的时候，选择不同的位置,需要计算好尺寸）

背景图片计算方法（详见以下地址）有坑需谨慎：

http://blog.csdn.net/u010003835/article/details/50668403

背景图如下

示例代码：

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <style type="text/css">        /*Lord Vader Hates Furry Animals*/            /*            link: 没有访问的链接;            visited: 被访问的链接;            hover: 鼠标悬浮;            focus: 键盘悬浮;            active: 链接被单击时;             */        a.book{display: block;        width:203px;        height:72px;                text-indent: -1000em;                background: url(./img/buttons.png) -203px 0 no-repeat;        }        a.book:link a.book:visited{        background: url(./img/buttons.png) -203px 0 no-repeat;        }        a.book:hover, a.book:focus{        background-position: right top;        }        a.book:active{        background-position: left top;        }        </style>    </head>    <body>    <a class="book" href="https://www.baidu.com/">Book now</a>    </body></html>

效果：

常态：

悬浮：

点击：

0 0