<!DOCTYPE html>
<html>
<head>
<style>
/* 条子样式 */
.strip {
position: fixed;
width: 100%;
height: 50px;
background-color: #f1f1f1;
text-align: center;
line-height: 50px;
font-size: 20px;
display: none;
}
/* 上下活塞式抽插动画 */
@keyframes slideUp {
0% {
top: 100%;
}
100% {
top: 0;
}
}
@keyframes slideDown {
0% {
top: 0;
}
100% {
top: 100%;
}
}
/* 显示条子效果 */
.show {
display: block;
animation: slideUp 0.5s forwards;
}
/* 隐藏条子效果 */
.hide {
animation: slideDown 0.5s forwards;
}
</style>
</head>
<body>
<button onclick="showStrip()">显示条子</button>
<div id="strip" class="strip">
这是一个条子
<button onclick="hideStrip()">隐藏</button>
</div>
<script>
function showStrip() {
var strip = document.getElementById("strip");
strip.classList.add("show");
}
function hideStrip() {
var strip = document.getElementById("strip");
strip.classList.remove("show");
strip.classList.add("hide");
}
</script>
</body>
</html>