Html 如何从左到右变换长方体阴影

如何使框阴影从左向右变换，而不向文本本身添加变换效果

此文本将根据内容更改大小，因此需要相应调整框阴影

目前我的代码是这样的

正文{
背景色：#FFFFFF；
边际：0px；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
}
.集装箱{
显示：块；
宽度：85%；
/*垂直和水平居中*/
位置：绝对；顶部：50%；左侧：50%；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
a、 a:参观，a:停留{
/*显示：块；这将使整条线对齐*/
-ms文本最后对齐：对齐；
-moz文本最后对齐：对齐；
文本最后对齐：对齐；
文字装饰：无；
颜色：#000000；
/*框阴影：插入0-1.3vw 0 0 0#00f9ff；旧脚本*/
}    
#测试1{
显示：内联块；
高度：自动；
宽度：自动；
能见度：可见；
盒影：插图0-1.3vw 0 0#00f9ff；
字体系列：“泰晤士报新罗马”，泰晤士报，衬线；
文本对齐：居中；
线高：7.5vw；
保证金：0；
字体大小：7.7vw；
字体大小：粗体；
动画：stretchRight；
-webkit动画：stretchRight；
动画持续时间：1s；
-webkit动画持续时间：1s；
动画计时功能：放松；
-webkit动画计时功能：轻松输出；
变换原点：0%0%；
-ms变换原点：0%0%；
-webkit转换源：0%0%；
}
@关键帧stretchRight{
0% {
变换：scaleX（0）；
}
100% {
变换：scaleX（1）；
}                           
}

---

您要做的是使用一个可以设置动画的伪元素。 我已经将动画添加到悬停状态，以便更好地进行测试

正文{
背景色：#FFFFFF；
边际：0px；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
}
.集装箱{
显示：块；
宽度：85%；
/*垂直和水平居中*/
位置：绝对；顶部：50%；左侧：50%；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
a、 a:参观，a:停留{
位置：相对位置；
/*显示：块；这将使整条线对齐*/
-ms文本最后对齐：对齐；
-moz文本最后对齐：对齐；
文本最后对齐：对齐；
文字装饰：无；
颜色：#000000；
}    
#测试1{
显示：内联块；
高度：自动；
宽度：自动；
能见度：可见；
字体系列：“泰晤士报新罗马”，泰晤士报，衬线；
文本对齐：居中；
线高：7.5vw；
保证金：0；
字体大小：7.7vw；
字体大小：粗体；
}
#测试1A：之后{
位置：绝对位置；
底部：0；
左：0；
宽度：0；
高度：3倍；
内容：“；
背景：#00f9ff；
过渡：宽度。2s缓进缓出；
}
#test1A:悬停：在{
宽度：100%；
}

---

如果要使用

动画

以及相同的

框阴影

。制作一个与

#test1

div具有相同

宽度、高度、方框阴影的伪元素。首先将其缩放为
0
，然后对其应用动画

使用
animation
而不是
transition
将允许您在页面加载时激活动画，而不是在
悬停
焦点
等事件中激活动画。我认为这是您想要的

请参阅下面的代码片段


#测试1{
显示：内联块；
高度：自动；
宽度：自动；
能见度：可见；
字体系列：“泰晤士报新罗马”，泰晤士报，衬线；
文本对齐：居中；
线高：7.5vw；
保证金：0；
字体大小：7.7vw；
字体大小：粗体；
位置：相对位置；
}
#测试1：之前{
内容：“；
盒影：插图0-1.3vw 0 0#00f9ff；
位置：绝对位置；
宽度：100%；
身高：100%；
左：0；
排名：0；
变换：scaleX（0）；
变换原点：左；
动画名称：stretchRight；
动画延迟：0.5s；
动画持续时间：0.8s；
动画填充模式：正向；
动画计时功能：放松；
z指数：-1；
}
a{
文字装饰：无；
}
@关键帧stretchRight{
0% {
变换：scaleX（0）；
}
100% {
变换：scaleX（1）；
}
}

你能解释得更清楚些吗？@redongreen很高兴我能帮上忙：D。如果这正是你想要的，别忘了评价/接受我的回答P.S.好歌：沉默之声；）这就是答案