如何使用CSS动画图像的某些部分？ [英] How to animate some parts of an image using CSS?

问题描述

我有一张图片，我想用CSS动画部分内容。

I have an image and I want to animate some parts of it using CSS.

所以，我有一个问题：

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

图片示例：

Image example:

带有24的磁盘必须从左边稍微呈圆形（如方向盘），文本小时应该从右边稍微出现圆圈就位，然后所有这一切都应该在1分钟或30秒内重复;）

The disk with 24 has to slightly appear rounding (like a wheel) from left, the text "hours" should slightly appear from right when the circle is in its place, then all this should repeat in 1 min or 30 seconds ;)

感谢您的帮助！

我希望如此。

I want it to be so.

推荐答案

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

看起来像这些，但更顺畅！

- 带图像

Using only a single HTML element and CSS (and an optional background image)

It looks like these, but smoother!

- with images

- 没有图像（需要进一步的造型）

- with no images (further styling needed)

兼容性： IE10 +和所有现代浏览器。 Chrome目前需要 -webkit - 前缀。

• < h6> 内的文字隐藏为 text-缩进：-9999px

显示的文本是用2 伪元素 h6 parent的子项，：在和之前：

The text shown is created with 2 pseudo element children of the h6 parent, :before and :after

伪元素子元素由于溢出：隐藏和左：100％ / 权利，隐藏在父母之外101％（额外百分之一隐藏边框边缘）

The pseudo element children are hidden outside the parent thanks to overflow: hidden and left:100% / right:101%(the extra one percent hides the borders edge)

小时文字动画延迟2秒

• 10％时24文字旋转180度

• At 10% the "24" text is rotated 180 degrees

25％到95％24和小时文字被移动到 tran的中心sform：translateX

At 25% to 95% the "24" and "hours" text is moved to the centre with transform: translateX

在100％时，文本会以转换回到境外：translateX（0） 和24推出 rotate（180deg）

At 100% the text is moved back outside with transform: translateX(0) and the "24" is rolled out with 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>

这篇关于如何使用CSS动画图像的某些部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！