如何使用CSS动画在方形路径中的div中移动文本?

Question

我有一个div标签，它的宽度和高度分别为500px，500px，还有一些文字。我想使用 CSS 动画将这个div 中的文本移动，例如

"左下角"到"右下角"，"右下角"移动到"右上角"，"右上角"移动到"左上角"和"左上角"到"左下角"

<div style="height:500px;width:500px">
<h3>Hai</h3>
</div>

那么我该如何才能做到这一点呢？

Answer 1

兄弟，你来了。 使用关键帧获得所需的 css 动画效果。

@keyframes square {
0%    {top: 0; left: 0}
25%   {top: 0; left: 100%;}
50%   {top: 100%; left: 100%;}
75%   {top: 100%; left: 0px;}
100%  {top: 0px; left: 0px;}
}
h3 {
position: relative;
animation-name: square;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: reverse;
}

<div style="height:100px;width:100px;">
<h3>Hai</h3>
</div>

Answer 2

您可以将外部div 设置为position: relative;，将内部div 设置为position: absolute; top: auto; right: auto; bottom: 0; left: 0;，以将其放置在左下角。

然后，您可以为文本提供一个持续 4 秒的动画，该动画永远持续下去，如下所示：

animation: change 4s normal 0s infinite;

对于动画本身，我不确定你想要什么。如果您希望文本出现在不同的角落，则可以使用以下命令：

@keyframes change {
/* Change from bottom left to bottom right a quarter way through*/
25% { top: auto; right: 0; bottom: 0; left: auto; }
/* Change from bottom right to top right half way through*/
50% { top: 0; right: 0; bottom: auto; left: auto; }
/* Change from top right to top left three quarters through*/
75% { top: 0; right: auto; bottom: auto; left: 0; }
/* Change from top left to bottom left at the end*/
100% { top: auto; right: auto; bottom: 0; left: 0; }
}

.text {
padding: 0;
margin: 0;
position: absolute;
animation: change 4s normal 0s infinite;
top: auto; right: auto; bottom: 0; left: 0;
}
.container {
height: 200px;
width: 200px;
background-color: blue;
position: relative;
}
@keyframes change {
25% { top: auto; right: 0; bottom: 0; left: auto; }
50% { top: 0; right: 0; bottom: auto; left: auto; }
75% { top: 0; right: auto; bottom: auto; left: 0; }
100% { top: auto; right: auto; bottom: 0; left: 0; }
}

<div class="container">
<h3 class="text">Hai</h3>
</div>

但是，如果您希望文本滑动，则可以使用以下内容：

@keyframes change {
/* Change from bottom left to bottom right a quarter way through*/
25% { left: 0; top: 100%; transform: translate(0%, -100%); }
/* Change from bottom right to top right half way through*/
50% { left: 100%; top: 100%; transform: translate(-100%, -100%); }
/* Change from top right to top left three quarters through*/
75% { left: 100%; top: 0; transform: translate(-100%, 0%); }
/* Change from top left to bottom left at the end*/
100% { left: 0; top: 0; transform: translate(-0%, 0%); }
}

.text {
padding: 0;
margin: 0;
position: absolute;
animation: change 4s normal 0s infinite;
left: 0px; top: 0%; transform: translate(-0%, 0%);
}
.container {
height: 200px;
width: 200px;
background-color: blue;
position: relative;
}
@keyframes change {
25% { left: 0; top: 100%; transform: translate(0%, -100%); }
50% { left: 100%; top: 100%; transform: translate(-100%, -100%); }
75% { left: 100%; top: 0; transform: translate(-100%, 0%); }
100% { left: 0; top: 0; transform: translate(-0%, 0%); }
}

<div class="container">
<h3 class="text">Hai</h3>
</div>

(在示例中，我缩小了div的大小，但此方法适用于任何高度和宽度(

Answer 3

使用左、上和变换：

div {
height: 400px;
width:500px;
border: solid 1px blue;
position: relative;
}
h3 {
background-color: tomato;
display: inline-block;
margin: 0;
padding: 10px;
animation: move 5s infinite linear;
position: absolute;
}
@keyframes move {
0% { left: 0px; top: 0%; transform: translate(-0%, 0%);}
25% { left: 0px; top: 100%; transform: translate(0%, -100%);}
50% { left: 100%; top: 100%; transform: translate(-100%, -100%);}
75% { left: 100%; top: 0%; transform: translate(-100%, -0%);}
100% { left: 0px; top: 0%; transform: translate(-0%, 0%);}
}

<div>
<h3>Hai</h3>
</div>