如何使用 CSS 为图像的某些部分设置动画？

Question

我有一张图片，我想使用 CSS 为它的某些部分设置动画。

所以，我有一个问题：

1. 我可以使用自动播放为图像的某些部分设置动画吗？ 我的意思是在一段时间后它应该在不重新加载整个页面的情况下自行设置动画。可能吗？

图片示例：

带有 24 的圆盘必须从左侧略微出现圆形（如轮子），当圆圈在其位置时，文本“小时”应从右侧略微出现，然后所有这些应在 1 分钟或 30 秒内重复； )

感谢您的帮助！

我希望它是这样的。

Answer 1

仅使用单个 HTML 元素和 CSS（以及可选的背景图片）

看起来像这些，但更平滑！

- 带图片

- 没有图片（需要进一步的样式）

兼容性： IE10+ and all modern browsers. Chrome currently requires the -webkit- prefix.

正文

• <h6> 内的文字被text-indent: -9999px 隐藏

• 显示的文本是由 h6 父级 :before 和 :after 的 2 个 pseudo element 子级创建的

• 由于overflow: hidden 和left:100% / right:101%，伪元素子元素隐藏在父元素之外（额外的百分之一隐藏了边框边缘）

• “小时”文字动画延迟 2 秒

关键帧内

• 在 10% 时，“24”文本旋转 180 度

• 在 25% 到 95% 时，“24”和“小时”文本移动到中心，transform: translateX

• 在 100% 时，文本使用 transform: translateX(0) 移回外部，而“24”使用 rotate(180deg) 推出

完整示例

使用背景图片

h6 {
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 30px;
  text-indent: -9999px
}
h6:before,
h6:after {
  position: absolute;
  text-indent: 0;
}
h6:before {
  content: '';
  background: url(http://i.stack.imgur.com/Ad9Tn.png) no-repeat;
  width: 25px;
  height: 25px;
  right: 101%;
  top: -3px; /*just for this example*/
  -webkit-animation: roll 10s infinite linear;
  animation: roll 10s infinite linear;
}
h6:after {
  content: '';
  background: url(http://i.stack.imgur.com/VT4GI.png) no-repeat;
  left: 100%;
  width: 100px;
  height: 100px;
  -webkit-animation: slide 10s 2s infinite linear;
  animation: slide 10s 2s infinite linear;
}
@-webkit-keyframes roll {
  10% {
    transform: rotate(180deg);
  }
  20%,
  95% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0) rotate(180deg);
  }
}
@-webkit-keyframes slide {
  10%, 75% {
    transform: translateX(-50px);
  }
  80% {
    transform: translateX(0);
  }
}
@keyframes roll {
  10% {
    transform: rotate(180deg);
  }
  10%,
  95% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0) rotate(180deg);
  }
}
@keyframes slide {
  20%, 75% {
    transform: translateX(-50px);
  }
  80% {
    transform: translateX(0);
  }
}

<h6>24 Hours</h6>

不使用图片

h6 {
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 30px;
  text-indent: -9999px
}
h6:before,
h6:after {
  position: absolute;
  text-indent: 0;
}
h6:before {
  content: '24';
  right: 101%;
  border: solid 2px #000;
  border-radius: 50%;
  padding: 4px;
  width: 10px;
  height: 10px;
  line-height: 10px;
  -webkit-animation: roll 10s infinite linear;
  animation: roll 10s infinite linear;
}
h6:after {
  content: 'hours';
  left: 100%;
  width: 10px;
  height: 10px;
  line-height: 20px;
  -webkit-animation: slide 10s 2s infinite linear;
  animation: slide 10s 2s infinite linear;
}
@-webkit-keyframes roll {
  10% {
    transform: rotate(180deg);
  }
  20%,
  95% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0) rotate(180deg);
  }
}
@-webkit-keyframes slide {
  10%,
  75% {
    transform: translateX(-45px);
  }
  80% {
    transform: translateX(0);
  }
}
@keyframes roll {
  10% {
    transform: rotate(180deg);
  }
  10%,
  95% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0) rotate(180deg);
  }
}
@keyframes slide {
  20%,
  75% {
    transform: translateX(-45px);
  }
  80% {
    transform: translateX(0);
  }
}

<h6>24 Hours</h6>

Answer 2

CSS 不会这样做。最好的选择可能是使用 Photoshop 之类的程序简单地创建一个 .gif

Answer 3

如果您将各个元素剪切为单独的图像，然后将它们相应地放置在容器中，然后按照您想要的方式为各个图像设置动画，您可以将所有内容一起制作动画。

或者，如果您有权访问矢量文件，则可以对动画图像的每个元素使用 SVG。这样，您可以更轻松地剪切元素并将其作为代码粘贴到 HTML 中。

所以是的，您可以，但前提是您将图像切割成单独的部分并为其设置动画。

编辑：//

是的，您可以添加自动播放。您可以使用 CSS 关键帧 (link)

SVG 是基于矢量的图形，对网络来说是相当新的。由于 SVG 是基于矢量的，因此可以在保持分辨率的同时将其调整为任意大小。如果你想了解更多关于矢量图形和SVG的知识，可以看here。

我提到 SVG 的唯一原因是因为它更易于使用，因为它类似于 HTML，并且 SVG 中的每个元素都可以用作 CSS 和 Javascript(jQuery) 中的选择器，以更改样式或对其进行动画处理。