问题【已解决】:如何旋转圆形的背景图片?
链接:https://codepen.io/Refath/pen/XaoMEj
你好,我想要将圆形元素的背景图片以相同的角度逆向旋转,以使背景相对于用户保持笔直。
我尝试使用css关键帧,但意识到这并不是最好的主意,并尝试实现给出[1]的解决方案,在一些调整后也失败了。谢谢;任何帮助都将不胜感激(我不是高级网络开发人员,所以在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>
.r1c, .r2c, .r3c, .r4c {animation: around 7.5s infinite linear; animation-direction:reverse}
JsFiddle - I haz kode