3
问题[已解决]：如何旋转背景图像的圆形？
链接：https://codepen.io/Refath/pen/XaoMEj旋转背景图像的方向相反
嗨，我想转一圈元素的背景图像相反的方向，但在相同的旋转幅度，使背景仍然相对于用户直。
我试图使用CSS关键帧，但意识到这不会是最好的主意，然后尝试实现给定[这里] [1]的解决方案，也失败后一些调整。谢谢;任何帮助表示赞赏（我不是一个先进的Web开发人员，所以我没有用JS太多的经验，等等）
@import url('https://fonts.googleapis.com/css?family=Quicksand:500');
body {
background-image: url(http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg);
}
.circle,
.r1c,
.r2c,
.r3c,
.r4c {
border: white 2px solid;
width: 90px;
height: 90px;
border-radius: 90px;
fill: lightred;
position: absolute;
margin: auto;
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: -5px -5px;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
transition: 0.1s ease-in-out;
}
.circle {
background-image: url(https://media.giphy.com/media/Ry0QlB6DwmCZO/giphy.gif);
background-position: -9px -9px;
}
.r1c:hover,
.r2c:hover,
.r3c:hover,
.r4c:hover {
width: 108px;
height: 108px;
border-radius: 108px;
transition: 0.3s ease-in;
background-size: 120px 120px;
background-position: -5.4px -5.4px;
}
.r1c {
position: relative;
overflow: hidden;
top: 200px;
background-image: url("http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Google-icon.png");
}
.r2c {
top: -400px;
background-image: url(https://www.shareicon.net/data/512x512/2015/09/30/109354_media_512x512.png);
}
.r3c {
left: 400px;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png);
}
.r4c {
right: 400px;
background-image: url("https://lh3.googleusercontent.com/mIeBLLu8xOi-1bPbtRO_HYb5d1VchJDLDH4hebMO7R-GNOfueGDtHCKgPWFjwyCAORQ=w300");
}
.r1l,
.r2l,
.r3l,
.r4l {
border: white 1px solid;
width: 0px;
height: 90px;
border-radius: 90px;
fill: lightred;
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.r1l {
top: 200px;
}
.r2l {
top: -200px;
}
.r3l {
width: 90px;
height: 0px;
left: 200px;
}
.r4l {
width: 90px;
height: 0px;
left: -200px;
}
.parent {
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
animation: around 7.5s infinite ease;
}
@keyframes around {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
.hero {
color: white;
font-family: 'Quicksand', sans-serif;
}<center>
<h1 class="hero">Hi, User!</h1>
</center>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="parent">
<div class="circle">
</div>
<a href="https://www.google.com">
<div class="r1c">
</div>
</a>
<div class="r2c">
</div>
<div class="r3c">
</div>
<div class="r4c">
</div>
<div class="r1l">
</div>
<div class="r2l">
</div>
<div class="r3l">
</div>
<div class="r4l">
</div>
</div>
什么是与@keyframes问题....？ –
我不知道如何使用它来解决这个问题。正如我所说，我相对缺乏经验。另外，即使使用关键帧，旋转背景图像的问题依然存在。 – DarkRunner
您可以尝试反向应用相同的动画。像这样'.r1c，.r2c，.r3c，.r4c {动画：大约7.5s无限线性; animation-direction：reverse}'[JsFiddle]（https://jsfiddle.net/vj4441nm/） –