动态变更背景图位置
的网站是每当鼠标放在相机图标那个位置的时候,相机就会切换到蓝色:
<!DOCTYPE html>
<html>
<head>
< charset="UTF-8">
<title>CSS Sprites</title>
<style>
/* 清除认样式 */
* { padding: ; margin: ; }
/* 这段是为了居中,不是重点,看不懂的话可以无视 */
body {
height: vh;
display: flex;
align-items: center;
justify-content: center;
}
@H__136@.sprite {
/* 宽高要设置的和图标一样大或者稍微大一点点 */
width: px;
height: px;
/* 背景图地址设置为Css Sprite的位置 */
background-image: url(http://img.mukewang.com/wiki/5ed9bc1809824eef00180038.jpg);
/* 背景图重复 */
background-repeat: no-repeat;
/* 令背景图在正确的位置 */
background-position: top;
}
/* 当鼠标移入时的样式定义 */
@H__136@.sprite:hover {
/* 令背景图在正确的位置 */
background-position: bottom;
}
</style>
</head>
<body>
<div class="sprite"></div>
</body>
</html>
运行结果:
可以看到,只要改变一下背景图的位置,就可以切换到另不同的图标,只要位置控制得当,一张Css Sprite就可以出各式各样不同的图标,是不是很神奇呢?
如果有些同学并没有能够理解的话,我们可以给背景过渡动画,方便大家理解究竟是如何切换图标的:
<!DOCTYPE html>
<html>
<head>
< charset="UTF-8">
<title>CSS Sprites</title>
<style>
/* 清除认样式 */
* { padding: ; margin: ; }
/* 这段是为了居中,不是重点,看不懂的话可以无视 */
body {
height: vh;
display: flex;
align-items: center;
justify-content: center;
}
@H__136@.sprite {
/* 宽高要设置的和图标一样大或者稍微大一点点 */
width: px;
height: px;
/* 背景图地址设置为Css Sprite的位置 */
background-image: url(http://img.mukewang.com/wiki/5ed9bc1809824eef00180038.jpg);
/* 背景图重复 */
background-repeat: no-repeat;
/* 令背景图在正确的位置 */
background-position: top;
/* 为背景过渡动画 */
transition: background s;
}
/* 当鼠标移入时的样式定义 */
@H__136@.sprite:hover {
/* 令背景图在正确的位置 */
background-position: bottom;
}
</style>
</head>
<body>
<div class="sprite"></div>
</body>
</html>
运行结果:
可以看到其实就是这么个原理,两张形状一样但颜色不一样的图形放在一张Css Sprite中,然后再控制位置即可。
就是在上加入了这么动态的,才不会显得那么平静如水。
有趣的交互能让你的熠熠生辉、锦上添花。
但并不是所有Css Sprite的尺寸都能这么完美的贴合元素,下一小节我们将告诉大家应该如何调节背景的大小以适应元素。