我正在建立一个网站,我想在中心图像周围制作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上的位置一样。
答案 0 :(得分:3)
您需要为每张图片构建不同的动画。我确信使用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"">
<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>
请注意,多个动画不利于浏览器性能。