jquery - 如何使用 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 隐藏

• 显示的文本是用 2 pseudo element 创建的h6 的 children parent ，:before和 :after

• 由于 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>