给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下

时间:2022-07-30 21:38:17

问题:给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下;

解决:animation: myfirst 2s;加上animation: myfirst 2s forwards;之后就可以了,

要实现的样式:div框淡出,但保证div的字体opoacity为1,要不然字体不清晰。(如果给div设置opacity,div子元素都会有透明度)

解决方案:用background-color: rgba(0, 0, 0, 0.2)给div设置背景色,css3动画也设置background-color: rgba(0, 0, 0, 0.2)属性

eg:

@keyframes show {
0% {
background-color: rgba(0, 0, 0, 0);
}
100% {
background-color: rgba(0, 0, 0, 0.2);
}
}