css 底部提示过两秒消失
时间: 2023-07-24 18:18:10 浏览: 150
您可以使用CSS3动画和JavaScript setTimeout()函数来实现底部提示过两秒消失的效果。以下是一个示例代码:
HTML:
```
<div id="bottom-tip">这里是底部提示信息</div>
```
CSS:
```
#bottom-tip {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
padding: 10px;
background-color: #333;
color: #fff;
opacity: 0;
transition: opacity 0.3s ease-in-out;
z-index: 9999;
}
.show-bottom-tip {
opacity: 1;
}
```
JavaScript:
```
setTimeout(function() {
document.getElementById("bottom-tip").classList.remove("show-bottom-tip");
}, 2000);
document.getElementById("bottom-tip").classList.add("show-bottom-tip");
```
在上述代码中,CSS部分定义了底部提示信息的样式,并使用opacity属性控制元素的透明度,以实现淡入淡出的效果。JavaScript部分使用setTimeout函数在2秒后删除底部提示信息的show-bottom-tip类,使其消失。同时,在页面加载时,使用classList.add()方法添加show-bottom-tip类,使其显示。