Javascript 悬停时，从方框的角处填充div/box的背景色

我试图从方框的角点填充div/box的背景色，并找到一种方法来指定开始“填充”的角点

我有一个框，可以在悬停时填充，但它只能从顶部、底部、左侧或右侧填充

#txt{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字体大小：2vw；
}
#盒子{
位置：固定；
最高：25%；
左：25%；
高度：20vw；
宽度：20vw；
边框：2件纯色深蓝；
背景色：黑色；
颜色：鬼白色；
}
#框：悬停{
颜色：深蓝；
过渡：颜色0.25秒；
}
#盒子：之后{
内容：“；
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
身高：100%；
变换：scaleY（0）；
变换原点：底部；
背景：幽灵白；
z指数：-1；
变换：变换0.25秒；
}
#框：悬停：：之后{
变换：scaleY（1）；
颜色：深蓝；
}

正文

只需更改css转换即可。例如，设置

translate（-50%，0%）量表（0,0）

然后

translate（0%，0%）量表（1,1）

将从左下角设置动画。。。
当然，这对转换既取决于源角点，也取决于框的所需初始条件
只要更改css转换即可。例如，设置

translate（-50%，0%）量表（0,0）

然后

translate（0%，0%）量表（1,1）

将从左下角设置动画。。。
当然，这对变换既取决于源角点，也取决于框的所需初始条件
使用变换正确定位元素，并进行旋转和平移。然后设置元素高度的动画以填充正方形

将：：after的大小设置为142%是斜边的四舍五入值。因为它更大，它会从容器中生长出来，所以我们在容器上设置overflow:hidden

要更改所有这些操作发生的角点，需要更改“顶部”、“左侧”、“变换原点”和“旋转角度”


#txt{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字体大小：2vw；
}
#盒子{
位置：固定；
最高：25%；
左：25%；
高度：20vw；
宽度：20vw；
边框：2件纯色深蓝；
背景色：黑色；
颜色：鬼白色；
溢出：隐藏；
}
#框：悬停{
颜色：深蓝；
过渡：颜色0.25秒；
}
#盒子：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：142%；
身高：0%；
变换：旋转（-45度）translateX（-50%）；
变换原点：左上角；
背景：幽灵白；
z指数：-1；
过渡：高度0.25秒；
}
#框：悬停：：之后{
身高：142%；
变换：旋转（-45度）translateX（-50%）；
颜色：深蓝；
}

正文
使用“变换”和“旋转”来正确定位元素。然后设置元素高度的动画以填充正方形

将：：after的大小设置为142%是斜边的四舍五入值。因为它更大，它会从容器中生长出来，所以我们在容器上设置overflow:hidden

要更改所有这些操作发生的角点，需要更改“顶部”、“左侧”、“变换原点”和“旋转角度”


#txt{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字体大小：2vw；
}
#盒子{
位置：固定；
最高：25%；
左：25%；
高度：20vw；
宽度：20vw；
边框：2件纯色深蓝；
背景色：黑色；
颜色：鬼白色；
溢出：隐藏；
}
#框：悬停{
颜色：深蓝；
过渡：颜色0.25秒；
}
#盒子：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：142%；
身高：0%；
变换：旋转（-45度）translateX（-50%）；
变换原点：左上角；
背景：幽灵白；
z指数：-1；
过渡：高度0.25秒；
}
#框：悬停：：之后{
身高：142%；
变换：旋转（-45度）translateX（-50%）；
颜色：深蓝；
}

正文
使用
左侧
、
右侧
、
顶部
和
底部
将框放置在角落，然后悬停时将值重置为0。不要忘记添加
溢出：隐藏到您的方框。下面是右上角的一个工作示例：


#txt{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字体大小：2vw；
}
#盒子{
位置：固定；
最高：25%；
左：25%；
高度：20vw；
宽度：20vw；
边框：2件纯色深蓝；
背景色：黑色；
颜色：鬼白色；
溢出：隐藏；
}
#框：悬停{
颜色：深蓝；
过渡：颜色0.25秒；
}
#盒子：之后{
内容：“；
位置：绝对位置；
底部：101%；
左：101%；
宽度：100%；
身高：100%；
变换原点：底部；
背景：幽灵白；
z指数：-1；
过渡：所有0.25秒缓解；
}
#框：悬停：：之后{
颜色：深蓝；
底部：0；
左：0；
}

正文
使用
左侧
、
右侧
、
顶部
和
底部
将框放置在角落，然后悬停时将值重置为0。不要忘记添加
溢出：隐藏到您的方框。下面是右上角的一个工作示例：


#txt{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字体大小：2vw；
}
#盒子{
位置：固定；
最高：25%；
左：25%；
高度：20vw；
宽度：20vw；
边框：2件纯色深蓝；
背景色：黑色；
颜色：鬼白色；
溢出：隐藏；
}
#框：悬停{
颜色：深蓝；
过渡：颜色0.25秒；
}
#盒子：之后{
内容：“；
位置：绝对位置；
底部：101%；
左：101%；
宽度：100%；
身高：100%；
变换原基
#box:after {
    transform: scale(0, 0);
    transform-origin: top left; /* animation will start from top left corner */
}

#box:hover::after {
    transform: scale(1, 1);
}

transform-origin: top right;
transform-origin: top left;
transform-origin: bottom left;
transform-origin: bottom right;