将传统LOGO变身动感动画，Google教你玩转CSS Sprite！

2023-12-23 08:34:30

2023年，为纪念美国现代舞舞蹈家玛莎·葛兰姆诞辰，Google Doodle推出了一款极其炫酷的LOGO，整个LOGO使用CSS Sprite技术，利用一个初始图片和一张画满各个动作的拼接图片，实现了动画，而非传统的GIF动画图像。

CSS Sprite入门指南：

理解CSS Sprite的概念： CSS Sprite是一种将多张图片合并为一个文件，然后使用CSS将各个部分分离的方法。这可以减少HTTP请求的数量，从而提高网站的加载速度。
创建CSS Sprite： 使用图像编辑软件（如Photoshop）或在线工具（如Sprite Cow）将多个图像组合成一个单一的文件。保存此文件为PNG或GIF格式。
编写CSS样式表： 使用CSS创建一个新的样式表，并在其中添加如下代码：

.sprite {
  background-image: url("sprite.png");
  width: 100px;
  height: 100px;
}

将“sprite.png”替换为您的CSS Sprite文件的名称。

使用CSS Sprite： 使用类“sprite”来应用CSS Sprite到您的网页元素。例如，您可以使用如下代码来将CSS Sprite应用到一个 <div> 元素：

<div class="sprite"></div>

可以通过调整 background-position 属性来显示CSS Sprite的不同部分。例如，以下代码将显示CSS Sprite的第一个图像：

.sprite {
  background-position: 0px 0px;
}

应用CSS Sprite打造动感动画：

在上面的例子中，我们使用了一张包含多个图像的CSS Sprite来创建动画。我们可以使用CSS来控制动画的播放，例如，我们可以使用CSS animation 属性来创建如下动画：

.sprite {
  animation: myanimation 2s infinite;
}

@keyframes myanimation {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: -100px 0px;
  }
}