css精灵图

精灵图就是有许多很小的图标组成的一个大图，而一个个小图是我们需要用到的。
例如图片中的ABCD…

精灵图的使用步骤

创建一个盒子,设置盒子的尺寸和小图尺寸相同
将精灵图设置为盒子的背景图片
修改背景图位置,通过ps 测量小图片左上角坐标，分别取负值设置给盒子的background-position: x y

精灵图都用行内标签显示。
代码示例：

    .one {
      display: inline-block;
      width: 105px;
      height: 110px;
      background-image: url(./abcd.jpg);
      background-position: -1px -8px;
    }

    .two {
      display: inline-block;
      width: 61px;
      height: 106px;
      background-image: url(./abcd.jpg);
      background-position: -326px -141px;
    }
    /* 通过ps测量出A字母和I字母的位置 */

<body>
  <span class="one"></span>
  <span class="two"></span>
</body>

浏览器效果：

过渡

过渡可以实现2个状态间的变化过程。

代码示例:

    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      transition: width 1s, background-color 1s;
    }
    
    .box:hover {
      width: 600px;
      background-color: skyblue;
    }
    
<body>
  <div class="box"></div>
</body>

transition的作用:让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验；

常见取值: all；所有能过渡的属性都过渡。具体属性名如: width；过渡属性 + 数字 + s(秒)

浏览器效果：过渡前（鼠标没选中盒子）：

过渡中（鼠标选中了盒子但是过渡未结束）：

可见颜色和宽度都在变化中；
过渡完成:

一些注意点

过渡需要:默认状态和hover状态样式不同，才能有过渡效果;
transition属性给需要过渡的元素本身加;
在不同状态中，效果不同。给默认状态设置，鼠标移入移出都有过渡效果;给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果。

css精灵图（雪碧图）与过渡特效

css精灵图

精灵图的使用步骤

过渡

一些注意点

感谢支持！