Html CSS上的边框排列不正确

正文{
保证金：0；
填充：0；
背景色：#073146；
}
.盒子{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：350px；
高度：180像素；
背景色：#001e2d；
框大小：边框框；
溢出：隐藏；
盒影：0 20px 50px rgba（0,0,0,0.5）；
边框：2倍实心rgba（0,0,0,0.5）；
}
.box：：之前{
内容：''；
位置：绝对位置；
排名：0；
左-100%；
宽度：100%；
身高：100%；
背景色：rgba（255255,0.1）；
过渡：0.5s；
指针事件：无；
}
.box:悬停：之前{
左-50%；
变换：skewX（-5度）；
}
/*这将控制框内的文本*/
.box.content{
位置：绝对位置；
顶部：15px；
左：15px；
右：15px；
底部：15px；
边框：2px实心#ffeb3b；
填充：30px；
文本对齐：居中；
盒影：0 15px 10px rgba（0,0,0,0.5）；
}
.box.content h1{
颜色：白色；
字体大小：30px；
利润率：0.10px；
填充：0；
}
.box.content p{
颜色：白色；
}
.箱跨{
位置：绝对位置；
排名：0；
左：0；
宽度：149%；
身高：100%；
显示：块；
框大小：边框框；
}
.框跨度：第n个子项（1）{
变换：旋转（0度）；
}
.箱跨：第n个子（2）{
变换：旋转（90度）；
}
.箱跨：第n个孩子（3）{
变换：旋转（180度）；
}
.箱跨：第n个孩子（4）{
变换：旋转（270度）；
}
/*架设一条线路*/
.盒子跨度：之前{
内容：''；
位置：绝对位置；
宽度：100%；
高度：2倍；
背景色：#0093ff；
动画：动画4s线性无限；
}
@关键帧设置动画{
0%{
变换：scaleX（0）；
变换原点：左；
}
50%{
变换：scaleX（1）；
变换原点：左；
}
50.1%{
变换：scaleX（1）；
变换原点：右；
}
100%{
变换：scaleX（0）；
变换原点：右；
}
}

文件
一些堆
三条边界进展顺利，但第四条边界混乱不堪

---

我不知道这是正确的还是有其他合适的解决方案，但这对我来说是可行的。谢谢你的评论，让我知道正确的方向。我很欣赏使用两种动画效果，因为宽度和高度不同，更改动画线的角度不在边上

正文{
保证金：0；
填充：0；
背景色：#073146；
}
.盒子{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：350px；
高度：180像素；
背景色：#001e2d；
框大小：边框框；
溢出：隐藏；
盒影：0 20px 50px rgba（0,0,0,0.5）；
边框：2倍实心rgba（0,0,0,0.5）；
}
.box：：之前{
内容：''；
位置：绝对位置；
排名：0；
左-100%；
宽度：100%；
身高：100%；
背景色：rgba（255255,0.1）；
过渡：0.5s；
指针事件：无；
}
.box:悬停：之前{
左-50%；
变换：skewX（-5度）；
}
/*这将控制框内的文本*/
.box.content{
位置：绝对位置；
顶部：15px；
左：15px；
右：15px；
底部：15px；
边框：2px实心#ffeb3b；
填充：30px；
文本对齐：居中；
盒影：0 15px 10px rgba（0,0,0,0.5）；
}
.box.content h1{
颜色：白色；
字体大小：30px；
利润率：0.10px；
填充：0；
}
.box.content p{
颜色：白色；
}
.箱跨{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
显示：块；
框大小：边框框；
}
.箱跨：第n个孩子（3）{
变换：旋转（180度）；
}
.箱跨：第n个孩子（4）{
变换：旋转（180度）；
}
/*架设一条线路*/
.box span:n个孩子（奇数）：之前{
内容：''；
位置：绝对位置；
宽度：100%；
高度：2倍；
背景色：#0093ff；
动画：动画4s线性无限；
}
.box span:n个孩子（偶数）：之前{
内容：''；
位置：绝对位置；
身高：100%；
宽度：2倍；
背景色：#0093ff；
动画：动画2 4s线性无限；
}
@关键帧设置动画{
0%{
变换：scaleX（0）；
变换原点：左；
}
50%{
变换：scaleX（1）；
变换原点：左；
}
50.1%{
变换：scaleX（1）；
变换原点：右；
}
100%{
变换：scaleX（0）；
变换原点：右；
}
}
@关键帧动画2{
0%{
变换：scaleY（0）；
变换原点：底部；
}
50%{
变换：scaleY（1）；
变换原点：底部；
}
50.1%{
变换：scaleY（1）；
变换原点：顶部；
}
100%{
变换：scaleY（0）；
变换原点：顶部；
}
}

文件
一些堆
三条边界进展顺利，但第四条边界混乱不堪

您需要将

宽度：

属性设置为

.box span下动画的全宽，然后将其第二个和第四个第n个子项的
属性设置为右：
和
左
属性。比如：


正文{
保证金：0；
填充：0；
背景色：#073146；
}
.盒子{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：350px；
高度：180像素；
背景色：#001e2d；
框大小：边框框；
溢出：隐藏；
盒影：0 20px 50px rgba（0,0,0,0.5）；
边框：2倍实心rgba（0,0,0,0.5）；
}
.box：：之前{
内容：''；
位置：绝对位置；
排名：0；
左-100%；
宽度：100%；
身高：100%；
背景色：rgba（255、255、25
    .box span:nth-child(2){
    transform: rotate(90deg);
    right: -170px;
    left: auto;
}.box span:nth-child(2){
    transform: rotate(90deg);
    right: -170px;
    left: auto;
}
.box span:nth-child(3){
    transform: rotate(180deg);
}

.box span:nth-child(4){
    transform: rotate(270deg);
    left: -170px;
}