问题[已解决]:
链接
https://codepen.io/Refath/pen/XaoMEj
您好,我正在尝试以相反的方向旋转圆形元素的背景图像,但旋转幅度相同,以便背景相对于用户保持笔直。
我曾尝试使用css关键帧,但意识到这不是最好的主意,然后尝试实现[here][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>
