Question

我正在建立一个网站，我想在中心图像周围制作6张图像。这是我迄今为止所发现的：

CSS：

.wrapper {
  width:300px;
  margin:0 auto;
  position:relative;
  height:300px;
  transform: rotateX(69deg)
}

.circle {
  position:absolute;
  top:50%;
  left:0;
  animation: rotate 10s linear infinite;
  transform: rotate(45deg) translateX(150px) rotate(-45deg);
}

@keyframes rotate {
    from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}

在codepen.io找到了这个，而不是我的工作。这是我见过的最好的，但它仍然不是我想要的。一方面，图像被拉伸所有有趣。并且它不适用于多个图像。

我希望图片全部以的形式在中循环，就像它们在my site上的位置一样。

Answer 1

您需要为每张图片构建不同的动画。我确信使用jQuery或SCSS可以使它变得更容易，但我已将其拼写出来：

body {
	margin: 0;
	text-align: center;
}

#center {
	margin-top: 150px;
	display: inline-block;
	width: 50px;
	height: 50px;
	font-size: 50px;
	line-height: 50px;
	position: relative;
}

.rotate {
	position: absolute;
	top: calc(50% - 50px);
	left: calc(50% - 50px);
	width: 100px;
	height: 100px;
}

.rotate:first-of-type {
	background: red;
	transform: rotate(-30deg) translateY(-150px) rotate(30deg);
	animation: rotate-1 10s linear infinite;
}

@keyframes rotate-1 {
	from { transform: rotate(-30deg) translateY(-150px) rotate(30deg) }
	to { transform: rotate(330deg) translateY(-150px) rotate(-330deg) }
}

.rotate:nth-of-type(2) {
	background: orange;
	transform: rotate(30deg) translateY(-150px) rotate(-30deg);
	animation: rotate-2 10s linear infinite;
}

@keyframes rotate-2 {
	from { transform: rotate(30deg) translateY(-150px) rotate(-30deg) }
	to { transform: rotate(390deg) translateY(-150px) rotate(-390deg) }
}

.rotate:nth-of-type(3) {
	background: yellow;
	transform: rotate(90deg) translateY(-150px) rotate(-90deg);
	animation: rotate-3 10s linear infinite;
}

@keyframes rotate-3 {
	from { transform: rotate(90deg) translateY(-150px) rotate(-90deg) }
	to { transform: rotate(450deg) translateY(-150px) rotate(-450deg) }
}

.rotate:nth-of-type(4) {
	background: green;
	transform: rotate(150deg) translateY(-150px) rotate(-150deg);
	animation: rotate-4 10s linear infinite;
}

@keyframes rotate-4 {
	from { transform: rotate(150deg) translateY(-150px) rotate(-150deg) }
	to { transform: rotate(510deg) translateY(-150px) rotate(-510deg) }
}

.rotate:nth-of-type(5) {
	background: blue;
	transform: rotate(210deg) translateY(-150px) rotate(-210deg);
	animation: rotate-5 10s linear infinite;
}

@keyframes rotate-5 {
	from { transform: rotate(210deg) translateY(-150px) rotate(-210deg) }
	to { transform: rotate(570deg) translateY(-150px) rotate(-570deg) }
}

.rotate:last-of-type {
	background: indigo;
	transform: rotate(270deg) translateY(-150px) rotate(-270deg);
	animation: rotate-6 10s linear infinite;
}

@keyframes rotate-6 {
	from { transform: rotate(270deg) translateY(-150px) rotate(-270deg) }
	to { transform: rotate(630deg) translateY(-150px) rotate(-630deg) }
}

<div id="center">
	<span>☺</span>
	<img class="rotate" src="http://v2.trex-game.tk/favicon.png" alt="T-Rex Game" width="64" height="64">
	<img class="rotate" src="/img/code.png" alt="ProHackr112 Code" width="64" height="64&quot;">
	<img class="rotate" src="/img/donut.png" alt="Have A Donut" width="75" height="80">
	<img class="rotate" src="https://addons.cdn.mozilla.net/user-media/addon_icons/417/417300-64.png" alt="" width="72" height="72">
	<img class="rotate" src="https://github.com/fluidicon.png" alt="" width="63" height="63">
	<img class="rotate" src="https://rubiks.com/images/carousel/solve-it-rubiks-cube.png" alt="Rubik's Cube Experiments" width="96" height="96">
</div>

请注意，多个动画不利于浏览器性能。

以HTML格式传播图像

1 个答案: