I在页面上的每个角落都有4个平方divs的绝对位置。我需要对它们进行动画动画以简化中心以形成一个圆圈。我经历了艰难的时间，试图弄清楚您将如何对角线移动到中心。我有下面的html和css。
到目前为止，我拥有它们所有应该是的颜色，并且我可以轻松地过渡到一侧的Border-radius 50％。这样，当他们对角线移动到中心时，他们可以一起结合在一起，最终形成一个圆圈。主要问题只是弄清楚如何使它们对角线放入中心。e（我只允许使用CSS为此使用。）我还试图在CSS代码中的评论中使用它来实现这一目标。 .
<body>
<div class="square_one"></div>
<div class="square_two"></div>
<div class="square_three"></div>
<div class="square_four"></div>
</body>
CSS
/* Layout */
div {
width: 100px;
height: 100px;
animation-name: squareCircle;
animation-duration: 5s;
animation-delay: 1s;
/* animation-iteration-count: infinite; */
transition: background-color 5s ease;
}
@keyframes squareCircle {
to {
background-color: black;
}
}
.square_one {
position: absolute;
top: 0;
left: 0;
animation-name: squareOne;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-bottom-right ease 4s;
/* transition: translate 4s; */
/* transform: translate(-50%,-50%); */
}
@keyframes squareOne {
to {
border-bottom-right-radius: 50%;
/* transform: translate(-50%,-50%); */
}
}
.square_two {
position: absolute;
top: 0;
right: 0%;
animation-name: squareTwo;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-bottom-left ease 0.5s;
}
@keyframes squareTwo {
to {
border-bottom-left-radius: 50%;
}
}
.square_three {
position: absolute;
bottom: 0%;
left: 0;
animation-name: squareThree;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-top-right ease 0.5s;
}
@keyframes squareThree {
to {
border-top-right-radius: 50%;
}
}
.square_four {
position: absolute;
bottom: 0%;
right: 0%;
animation-name: squareFour;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-top-left-radius ease 5s;
}
@keyframes squareFour {
to {
border-top-left-radius: 50%;
}
}
/* Block */
.square_one {
background-color: lightcoral;
}
.square_two {
background-color: lightblue;
}
.square_three {
background-color: lightgreen;
}
.square_four {
background-color: lightgoldenrodyellow;
}
div {
width: 100px;
height: 100px;
animation-name: squareCircle;
animation-duration: 5s;
animation-fill-mode: forwards;
animation-delay: 1s;
/* animation-iteration-count: infinite; */
transition: background-color 5s ease;
}
@keyframes squareCircle {
to {
background-color: black;
}
}
.square_one {
position: absolute;
top: 0;
left: 0;
animation-name: squareOne;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-bottom-right, top, left ease 4s;
/* transition: translate 4s; */
}
@keyframes squareOne {
to {
border-bottom-right-radius: 100%;
top: 50%;
left: 50%;
/* transform: translate(-50%,-50%); */
}
}
.square_two {
position: absolute;
top: 0;
right: 0%;
animation-name: squareTwo;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-bottom-left, top, right ease 0.5s;
}
@keyframes squareTwo {
to {
border-bottom-left-radius: 100%;
top: 50%;
right: 50%;
}
}
.square_three {
position: absolute;
bottom: 0%;
left: 0;
animation-name: squareThree;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-top-right, bottom, left ease 0.5s;
}
@keyframes squareThree {
to {
bottom: 50%;
left: 50%;
border-top-right-radius: 100%;
}
}
.square_four {
position: absolute;
bottom: 0%;
right: 0%;
animation-name: squareFour;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-top-left-radius, bottom, right ease 5s;
}
@keyframes squareFour {
to {
bottom: 50%;
right: 50%;
border-top-left-radius: 100%;
}
}
/* Block */
.square_one {
background-color: lightcoral;
}
.square_two {
background-color: lightblue;
}
.square_three {
background-color: lightgreen;
}
.square_four {
background-color: lightgoldenrodyellow;
}<body>
<div class="square_one"></div>
<div class="square_two"></div>
<div class="square_three"></div>
<div class="square_four"></div>
</body>
这是我结束的CSS，以获得所需的结果。希望我们能够/能够帮助现在甚至将来有相同或相似问题的人。