您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

动态变更背景图位置

的网站是每当鼠标放在相机图标那个位置的时候,相机就会切换到蓝色:

<!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的尺寸都能这么完美的贴合元素,下一小节我们将告诉大家应该如何调节背景的大小以适应元素。


联系我
置顶