如何使用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%（额外百分之一隐藏边框边缘），伪元素子项隐藏在父级之外

• ＆＃34;小时＆＃34;文本动画延迟2秒

在关键帧内

• 10％＆＃34; 24＆＃34;文字旋转180度

• 25％至95％的＆＃34; 24＆＃34;和＆＃34;小时＆＃34;使用transform: translateX

将文字移至中心

• 在100％时，文字会移回transform: translateX(0)以及＆＃34; 24＆＃34;推出rotate(180deg)

完整示例

使用背景图像

＆＃13;

＆＃13;

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);
  }
}

＆＃13;

<h6>24 Hours</h6>

＆＃13;

＆＃13;

＆＃13;

不使用图像

＆＃13;

＆＃13;

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);
  }
}

＆＃13;

<h6>24 Hours</h6>

＆＃13;

＆＃13;

＆＃13;

Answer 2

CSS不会这样做。可能最好的选择是使用像photoshop这样的程序创建一个.gif文件

Answer 3

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

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

所以是的，你可以但只有当你将图像切割成单个部分并为它们制作动画时才会这样。

编辑：//

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

执行此操作

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

我提到SVG的唯一原因是它更容易使用，因为它与HTML类似，并且SVG中的每个元素都可以用作CSS和Javascript（jQuery）中的选择器改变风格和/或制作动画。