旋转背景图像与div的方向相反

时间：2017-08-31 04:27:03

标签： html css css3 css-animations codepen

问题[已解决]：如何旋转圆圈的背景图像？
链接：https://codepen.io/Refath/pen/XaoMEj

嗨，我试图以相反的方向旋转圆形元素的背景图像，但旋转幅度相同，以使背景相对于用户保持笔直。
我曾尝试使用css关键帧，但意识到这不是最好的主意，然后尝试实现[here] [1]给出的解决方案，经过一些调整后也失败了。谢谢;任何帮助都表示赞赏（我不是一个高级的Web开发人员，因此我没有太多的JS经验等）。

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：3)

你想要这样的东西：

@import url('https://fonts.googleapis.com/css?family=Quicksand:500');

body{
	background-color:black;
}
	img{
		position:relative;
		width:100%;
		height:100%;
		animation: around 6.5s infinite ease;
		animation-direction:reverse
	}


.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: 310px;
	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;
	position:absolute;
	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;
}
<img src='http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg'/>
<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>

相关问题
最新问题