Html CSS将效果滑入容器

我想得到这样的效果：

但我不能只移动内容，而只保留固定的容器。如果你看到我的小提琴，我正在一起移动，内容和容器。 甚至我想把悬停放在circle div上，而不是像现在这样放在内容中，因为现在当动画结束时，它会失去悬停

要记住的一点细节：

• 我需要在运行时更新要显示的文本，因为它应该是 根据用户选择的语言进行翻译

这是我的

.frame{
显示器：flex；
背景颜色：绿色；
高度：200px；
宽度：200px；
弯曲方向：中心；
证明内容：中心；
对齐项目：居中；
}
.椭圆形{
显示器：flex；
背景色：白色；
边界半径：50px；
宽度：100px；
高度：100px；
}
.盒子{
显示器：flex；
弯曲方向：立柱；
背景颜色：灰色；
高度：100px；
宽度：100px；
位置：相对位置；
顶部：25px；
过渡：进入前200米；
边界半径：50px；
}
.box:悬停{
顶部：-50px；
过渡：进入前200米；
动画：ticker 25s立方贝塞尔（1,0,5,0）；
}
@关键帧计时器{
0% {
页边距上限：0
}
25% {
利润上限：-30px
}
50% {
利润上限：-60px
}
75% {
利润上限：-90px
}
100% {
页边距上限：0
}
}
博克斯酒店{
弹性：1；
利润率：5%；
颜色：白色；
文本对齐：居中；
对齐项目：居中；
}
.首先{
背景颜色：蓝色；
}
.第二{
背景色：红色；
}

文本1
文本2

您可以使用伪元素。首先隐藏

：在
之后使用
转换：translateY（100%）
和
溢出：在父对象上隐藏
，并在悬停时将
转换为
100%
之前的
，并将
之后的
移动到0


.elem{
位置：相对位置；
宽度：100px；
高度：100px；
边框：1px纯白；
颜色：白色；
边界半径：50%；
背景#4CA5D0；
溢出：隐藏；
}
埃伦：之后，
埃伦：以前{
内容：“顶部”；
位置：绝对位置；
过渡：所有0.3秒都容易进入；
排名：0；
左：0；
身高：100%；
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
埃伦：之后{
内容：“底部”；
转化：translateY（100%）；
}
悬停：在之前{
转换：translateY（-100%）；
}
.elem:悬停：之后{
变换：translateY（0）；
}
如果图标是图像，则可能需要非伪元素方法。下面是一个使用字体可怕图标来演示图像的示例（不过，fa图标可以与伪元素一起使用）


.link{
位置：相对；/*用于绝对位置的儿童工作*/
显示：内联flex；
弯曲方向：立柱；
身高：100px；/*此方法使用绝对位置的儿童*/
宽度：100px；/*…需要固定的宽度和高度*/
颜色：白色；
边界半径：100%；
边框颜色：白色；
边框样式：实心；
边框宽度：2倍；
溢出：隐藏；/*隐藏溢出的元素*/
}
.图标{
位置：绝对位置；
顶部：50%；/*结合变换将图标垂直放置在中心-50%*/
左：50%；/*与水平居中处理相同*/
变换：平移（-50%，-50%）；/*水平、垂直*/
过渡：所有0.2秒缓解；
}
.文本{
位置：绝对位置；
顶部：150%；/*将文本放置在.link容器元素下*/
左：50%；
转换：翻译（-50%，-50%）；
过渡：所有0.2秒缓解；
}
.link:hover.icon{
顶部：-50%；/*将图标放置在.link容器元素上方*/
}
.link:hover.text{
顶部：50%；/*将文本移动到.link容器元素的中心*/
}
/*样式-忽略*/
正文{display:flex；justify content:center；align items:center；height:100vh；margin:0；字体大小：24px；背景色：hsl（189,72%，45%）；字体变体：小写；字体系列：verdana；}。图标i{font size:40px；}

以下答案：

关于：

我需要在运行时更新要显示的文本，因为它应该是
根据用户选择的语言进行翻译

您可以在pseudo elements的
content
属性中与
attr（）
CSS函数一起使用

注意：在语言处理逻辑中使用JS更改这些数据属性


.elem{
位置：相对位置；
宽度：100px；
高度：100px；
边框：1px纯白；
颜色：白色；
边界半径：50%；
背景#4CA5D0；
溢出：隐藏；
}
埃伦：之后，
埃伦：以前{
内容：attr（数据顶端文本）；
位置：绝对位置；
过渡：所有0.3秒都容易进入；
排名：0；
左：0；
身高：100%；
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
埃伦：之后{
内容：attr（数据底部文本）；
转化：translateY（100%）；
}
悬停：在之前{
转换：translateY（-100%）；
}
.elem:悬停：之后{
变换：translateY（0）；
}
谢谢你！！！如果在运行时需要更改文本，我可以使用这种方式吗？”“Top”和“Bottom”应根据用户选择的语言进行翻译。我不确定这一点。@FacundoLaRocca您可以设置数据属性并在伪元素的内容属性中获取它们。