gpt4 book ai didi

html - 使用 CSS 顺时针围绕对象移动元素

转载 作者:行者123 更新时间:2023-11-27 23:06:12 26 4
gpt4 key购买 nike

这里给出这个例子

#mainPage {
width: 400px;
height: 165px;
margin: 10% auto;
}

#mainPage>p {
text-align: center;
}

.box {
width: 48px;
height: 30px;
background: red;
}

#title {
letter-spacing: 7px;
font-size: 30px;
margin-bottom: 30px;
}

#box1 {
animation: moveBox1 5s infinite;
}

#box2 {
animation: moveBox2 5s infinite;
}

@keyframes moveBox1 {
from {
/* currentPosition */
}
25% {
/* right top corner */
}
50% {
/* right bottom corner */
}
75% {
/* left bottom corner */
}
to {
/* start position */
}
}

@keyframes moveBox2 {
from {
/* currentPosition */
}
25% {
/* left bottom corner */
}
50% {
/* left top corner */
}
75% {
/* right top corner */
}
to {
/* start position */
}
}
<div id="mainPage">
<div class="box" id="box1"></div>

<p id="title">TITLE HERE</p>

<div class="box" id="box2"></div>
</div>

我想先将 box2 放在右边。

这样做之后,两个框应该顺时针围绕文本移动。我试图从动画语法开始,但我不知道如何定位它们以便它们可以在其他元素周围移动。

所以 box1 应该有这个路径:

  • 从左上开始
  • 到右上角
  • 到右下角
  • 到左下角
  • 回到左上角

box2 会有这个路径:

  • 从右下角开始
  • 到左下角
  • 到左上角
  • 到右上角
  • 回到右下角

有人可以帮忙吗?

最佳答案

使用转换,您可以实现您的解决方案。

#mainPage {
width: 400px;
height: 165px;
margin: 10% auto;
}

#mainPage>p {
text-align: center;
}

.box {
width: 48px;
height: 30px;
background: red;
}

#title {
letter-spacing: 7px;
font-size: 30px;
margin-bottom: 30px;
}

#box1 {
animation: moveBox1 5s infinite;
}

#box2 {
animation: moveBox2 5s infinite;
}

@keyframes moveBox1 {
from {
transform: translate(0, 0);
}
25% {
transform: translate(350px, 0);
}
50% {
transform: translate(350px, 150px);
}
75% {
transform: translate(0, 150px);
}
to {
transform: translate(0, 0);
}
}

@keyframes moveBox2 {
from {
transform: translate(350px, 0);
}
25% {
transform: translate(0, 0);
}
50% {
transform: translate(0, -150px);
}
75% {
transform: translate(350px, -150px);
}
to {
transform: translate(350px, 0);
}
}
<div id="mainPage">
<div class="box" id="box1"></div>

<p id="title">TITLE HERE</p>

<div class="box" id="box2"></div>
</div>

关于html - 使用 CSS 顺时针围绕对象移动元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49010190/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com