Question

在根据屏幕的宽度和高度转换此元素时，我需要帮助。 “行星”必须位于“轨道”上。

这是当前外观：

body{
  background-color: lightgray;
  margin: 0; padding: 0;
  background-color: #004169;
}

.divlogo{
  position: absolute;
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: space-around;
  align-items: center;
}

.logo{
  width: 25%;
  transform: perspective( 600px ) rotateY( 45deg );
  animation: log 20s infinite linear;
  animation: per 10s infinite linear;
}

@keyframes per{
  0%{
    transform: perspective( 600px ) rotateY( 45deg );
}
  50%{
    transform: perspective( 600px ) rotateY( -45deg );
  }
  100%{
    transform: perspective( 600px ) rotateY( 45deg );
  }
}

@keyframes logo{
  0%{
    transform: rotate(0turn);
  }
  100%{
    transform: rotate(1turn);
  }
}

.divcircle{
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.circle{
  width: 90vw;
  height: 90vh;
  border: 2px dotted orange;
  border-radius: 50%;
}

.divfirst{
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
}

.first{
  width: 10vw;
  height: 10vw;
  background-image: url(https://a.radikal.ru/a42/1906/2c/7fa4fc2e00bc.png);
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  border-radius: 50%;
  animation: spotify 20s linear infinite;
}

.first:hover{
  border: 2px solid orange;
  animation-play-state: paused;
}


@keyframes spotify{
  0%{
    transform:rotate(0deg)
              translate(45vw)
              rotate(0deg);
    width: 10vh;
    height: 10vh;
  }
  25%{
    width: 20vh;
    height: 20vh;
  }
  50%{
    width: 10vh;
    height: 10vh;
  }
  75%{
    width: 0vh;
    height: 0vh;
  }
  100%{
    transform:rotate(360deg)
              translate(45vw)
              rotate(-360deg);
    width: 10vh;
    height: 10vh;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>gh3</title>
	<link rel="stylesheet" href="styleglory3.css">
</head><body>
<div class="divlogo">  <img class="logo" src="https://d.radikal.ru/d30/1906/a7/417875ee296b.png">  </div>
<div class="divcircle">
	<div class="circle"></div>
</div>
<div class="divfirst">
	<div class="first"></div>
</div>
  </body>
</html>

Answer 1

这里有一个想法，使用两个动画来分别设置顶部/左侧的间隔动画，并通过调整计时功能来创建所需的效果。

您可能需要稍微调整该值以使其完美地位于轨道上：

body{
  background-color: lightgray;
  margin: 0; padding: 0;
  background-color: #004169;
}

.divlogo{
  position: absolute;
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: space-around;
  align-items: center;
}

.logo{
  width: 25%;
  transform: perspective( 600px ) rotateY( 45deg );
  animation: per 10s infinite linear;
}

@keyframes per{
  0%{
    transform: perspective( 600px ) rotateY( 45deg );
}
  50%{
    transform: perspective( 600px ) rotateY( -45deg );
  }
  100%{
    transform: perspective( 600px ) rotateY( 45deg );
  }
}


.divcircle{
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.circle{
  width: 90vw;
  height: 90vh;
  border: 2px dotted orange;
  border-radius: 50%;
}

.divfirst{
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
}

.first{
  width: 10vw;
  height: 10vw;
  background-image: url(https://a.radikal.ru/a42/1906/2c/7fa4fc2e00bc.png);
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  border-radius: 50%;
  animation: 
    spotify-1 20s linear infinite,
    spotify-2 20s linear infinite;
  position:fixed;
}

.first:hover{
  border: 2px solid orange;
  animation-play-state: paused;
}


@keyframes spotify-1{
  0%{
    top:50vh;
    animation-timing-function: ease-out;
  }
  25%{
    top:0;
    animation-timing-function: ease-in;
  }
  50%{
    top:50vh;
    animation-timing-function: ease-out;
  }
  75%{
    top:90vh;
    animation-timing-function: ease-in;
  }
  100%{
    top:50vh;
    animation-timing-function: ease-out;
  }
}
@keyframes spotify-2{
  0%{
    left:0vw;
    animation-timing-function: ease-in;
  }
  25%{
    left:50vw;
    animation-timing-function: ease-out;
  }
  50%{
    left:90vw;
    animation-timing-function: ease-in;
  }
  75%{
    left:50vw;
    animation-timing-function: ease-out;
  }
  100%{
    left:0vw;
    animation-timing-function: ease-in;
  }
}

<div class="divlogo">  

<img class="logo" src="https://d.radikal.ru/d30/1906/a7/417875ee296b.png">  </div>
<div class="divcircle">
	<div class="circle"></div>
</div>
<div class="divfirst">
	<div class="first"></div>
</div>

动画取决于屏幕的宽度和高度

1 个答案: