Fatal编程技术网
  • html/
  • Html 隐藏溢出动画反射div

Html 隐藏溢出动画反射div

html css animation

Html 隐藏溢出动画反射div,html,css,animation,css-animations,Html,Css,Animation,Css Animations,我正在尝试为一个div制作动画，但问题是，制作反射的div在按钮外进行了转换 如何将反射div叠加到按钮div中 正文{ 背景颜色：灰色 } .外分区{ 位置：相对位置； 溢出：隐藏； 最大宽度：100%； } .身份标签{ 显示器：flex； 宽度：30%； 证明内容：中心； 填充：0.35em； 颜色：白色； 边界半径：30px； 字体大小：粗体； 背景颜色：蓝色； } .设置标签动画：在{ 内容：“； 位置：绝对位置； 宽度：30%； 前-5%； 身高：105%； 右：100%； 不透明

我正在尝试为一个div制作动画，但问题是，制作反射的div在按钮外进行了转换

如何将反射div叠加到按钮div中

正文{
背景颜色：灰色
}
.外分区{
位置：相对位置；
溢出：隐藏；
最大宽度：100%；
}
.身份标签{
显示器：flex；
宽度：30%；
证明内容：中心；
填充：0.35em；
颜色：白色；
边界半径：30px；
字体大小：粗体；
背景颜色：蓝色；
}
.设置标签动画：在{
内容：“；
位置：绝对位置；
宽度：30%；
前-5%；
身高：105%；
右：100%；
不透明度：0.2；
变换：旋转（180度）；
背景：rgba（255,255,255,0.5）；
背景：线性梯度（向右，rgba（255，255，255，0.5）0%，rgba（255，255，255，0.7）77%，rgba（255，255，255，0.2）92%，rgba（255，255，255，0.25）100%；
动画：无限发光；
动画延迟：0s；
}
@关键帧发光{
到{
不透明度：1；
右：40%；
}
}

准备按钮
您正在设置
溢出：隐藏属性。因为
.outer div
是100%宽的，所以相对于
.status label

没有什么东西可以“切掉”
您必须将溢出属性设置为
.status label.animate label
容器，并使其
位置：相对。然后，您可以根据需要调整
。动画标签
和
@关键帧的属性


谢谢你的例子，你刚刚解决了我的问题：D