Question

这对我来说可能是一个简单但非常令人沮丧的问题......我将不胜感激任何反馈。

我一直想弄清楚如何创建一个动画图像，它保持在50％的边界半径div内，当鼠标悬停时我希望图像跟随图像的动画360度旋转，我已经创建了我在Cinema 4D中的小动画，上传并发布了我正在使用的图片。

当鼠标离开悬停状态时，我最初的想法是图像停止并在悬停时开始，或完全重新启动，如果您查看我的片段，您可以看到当您将鼠标悬停在图像上时看起来有多可怕，它将从它最初结束的地方开始

所以我尝试了一些解决方案＆＃39;但没有什么是正确的。

http://tympanus.net/codrops/2012/05/09/how-to-create-a-fast-hover-slideshow-with-css3/

这个教程有点工作并使图像结束并从我想要的地方开始，但我无法将图像放在50％半径div内，它有点像小马车，所以我相信我必须要有css＆＃39; background-image＆＃39;下的图像而不是html＆＃39; img src =＆＃39;

希望这是可以理解的，感谢您的帮助！这令我很沮丧！

＆＃13;

html, body {
	background-color:black;
	margin:0;
	padding:0;
	font-family: sans-serif;
	color: white;	
}
.icons {
	display: block;
	position: relative;
	height: 120px;
	width: 120px;
	border-radius: 50%;
	border: 2px solid white;
	margin: 0 auto;
	margin-top: 30px;
	float: center;
	background-image: url(https://s13.postimg.org/fuby3qdr7/Logo5_0000.png);
	background-size: 250px;
	background-position: center;
	
}
.icons:hover {
	background-image: url(https://s11.postimg.org/b36lstn0j/19z8gw.gif);
	background-size: 250px;
	 transition-delay:0.5s;
}
.icons:before {
	position:absolute;
	content:"Hover";
	font-size:12px;
	color: white;
	letter-spacing: 5px;
	text-align: center;
	left: 28%;
	bottom: -20%;
}

＆＃13;

<div class="icons"> </div>

＆＃13;

img 00 - https://s13.postimg.org/fuby3qdr7/Logo5_0000.png

img 01 - https://s13.postimg.org/hanglvgo3/Logo5_0001.png

img 02 - https://s13.postimg.org/r98f8cq3n/Logo5_0002.png

img 03 - https://s13.postimg.org/crb80cysj/Logo5_0003.png

img 04 - https://s13.postimg.org/496tt4ylf/Logo5_0004.png

img 05 - https://s13.postimg.org/bqg18co4j/Logo5_0005.png

img 06 - https://s13.postimg.org/519hsc2sj/Logo5_0006.png

img 07 - https://s13.postimg.org/4ps1fkmcj/Logo5_0007.png

img 08 - https://s13.postimg.org/dm2tjicyr/Logo5_0008.png

img 09 - https://s13.postimg.org/k11ug6joj/Logo5_0009.png

img 10 - https://s13.postimg.org/nyp45l6hv/Logo5_0010.png

img 11 - https://s13.postimg.org/p298hjr4z/Logo5_0011.png

img 12 - https://s13.postimg.org/dr6kt6k9v/Logo5_0012.png

img 13 - https://s13.postimg.org/v5qt1gher/Logo5_0013.png

img 14 - https://s13.postimg.org/4yu7j8oir/Logo5_0014.png

img 15 - https://s13.postimg.org/6f5q1drfn/Logo5_0015.png

img 16 - https://s13.postimg.org/6t720zbj7/Logo5_0016.png

gif - https://s11.postimg.org/b36lstn0j/19z8gw.gif

Answer 1

试试这个，

通过在css中使用animation来完成。 animation-play-state用于在悬停时控制动画的pause和continue。

（不要在img标签之间放置换行符）

html, body {
  background-color:black;
  margin:0;
  padding:0;
  font-family: sans-serif;
  color: white;	
}
.icons {
  display: block;
  position: relative;
  height: 120px;
  width: 120px;
  border-radius: 50%;
  border: 2px solid white;
  margin: 0 auto;
  margin-top: 30px;
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
}

.slide{
  width:100%;
  height:100%;
  position:absolute;
  white-space:nowrap;
  top:0;
  left:0;
  animation:slide 2s steps(16,end) infinite;
  animation-play-state:paused;
  text-align:center;
  box-sizing:border-box;
}

.slide img{
  width:100%;
  height:100%;
}
.icons:hover .slide{	
  animation-play-state:running;
}

@keyframes slide{
  100%{
    left:-1600%;
  }
}

<div class="icons">
	<div class="slide">
      <img src="https://s13.postimg.io/fuby3qdr7/Logo5_0000.png"/><img src="https://s13.postimg.io/hanglvgo3/Logo5_0001.png"/><img src="https://s13.postimg.io/r98f8cq3n/Logo5_0002.png"/><img src="https://s13.postimg.io/crb80cysj/Logo5_0003.png"/><img src="https://s13.postimg.io/496tt4ylf/Logo5_0004.png"/><img src="https://s13.postimg.io/bqg18co4j/Logo5_0005.png"/><img src="https://s13.postimg.io/519hsc2sj/Logo5_0006.png"/><img src="https://s13.postimg.io/4ps1fkmcj/Logo5_0007.png"/><img src="https://s13.postimg.io/dm2tjicyr/Logo5_0008.png"/><img src="https://s13.postimg.io/k11ug6joj/Logo5_0009.png"/><img src="https://s13.postimg.io/nyp45l6hv/Logo5_0010.png"/><img src="https://s13.postimg.io/p298hjr4z/Logo5_0011.png"/><img src="https://s13.postimg.io/dr6kt6k9v/Logo5_0012.png"/><img src="https://s13.postimg.io/v5qt1gher/Logo5_0013.png"/><img src="https://s13.postimg.io/4yu7j8oir/Logo5_0014.png"/><img src="https://s13.postimg.io/6f5q1drfn/Logo5_0015.png"/><img src="https://s13.postimg.io/6t720zbj7/Logo5_0016.png"/>
  </div>
</div>

最好使用spritesheet而不是使用所有这些图像。它会让你更容易

CSS动画悬停问题

1 个答案: