为什么刷新页面后的一瞬间几个h3会重叠，然后才消失变成第一个h3的内容？
加了
-webkit-transition:opacity 0.5s ease-in-out;
-moz-transition:opacity 0.5s ease-in-out;
-ms-transition:opacity 0.5s ease-in-out;
-o-transition:opacity 0.5s ease-in-out;
transition:opacity 0.5s ease-in-out;
谷歌浏览器会出现这个问题，刷新页面一开始所有h3会重叠一会，然后动画消失后变成当前的第一个h3
正在回答 回答被采纳积分+1
我也出现了这种情况，刷新的瞬间看到所有h3堆在一起然后消失成一个
.cr-titles h3{
position: absolute;
width: 100%;
text-align: center;
color: #fff;
z-index: 1000;
top:200px;
opacity: 0;
-webkit-transition:opacity 0.5s ease-in-out;
-moz-transition:opacity 0.5s ease-in-out;
-ms-transition:opacity 0.5s ease-in-out;
-o-transition:opacity 0.5s ease-in-out;
transition:opacity 0.5s ease-in-out;
}
.cr-titles h3 span:nth-child(1){
display: block;
font-size: 70px;
font-family: Arial;
letter-spacing: 7px;
}
.cr-titles h3 span:nth-child(2){
display: block;
font-size: 14px;
padding: 10px 0;
width: 100%;
font-family: Arial;
background: rgba(104,171,194,0.9);
font-style: italic;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4){
opacity: 1;
}
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星