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

最新推荐文章于 2022-11-12 16:48:15 发布

高达一号

最新推荐文章于 2022-11-12 16:48:15 发布

阅读量1.7k

点赞数

分类专栏： Html+Css应用文章标签：图片 a标签 a标签特效

本文链接：https://blog.csdn.net/u010003835/article/details/50668191

版权

Html+Css应用专栏收录该内容

24 篇文章 0 订阅

订阅专栏

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

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

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

下面讲解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

收藏

觉得还不错? 一键收藏
0
评论
Html+Css 链接状态变换的单图片实现（精通CSS高级WEB解决方案）读书笔记

需求链接, 在点击,悬浮,访问过后需要进行图片的变换。常规做法; 利用伪类选择器，创建多个图片，在悬浮，点击的时候切换不同的图片高级：上面做法存在一定缺陷，换图的时候可能出现闪烁下面讲解pixey 图片切换法（将多种状态放在一张图片中, 进行切换的时候，选择不同的位置,需要计算好尺寸）背景图如下示例代码：
复制链接

扫一扫