[分享]css关闭的动画效果吗

/* 定义动画效果 */ @keyframes close { 0% { height: 100px; } 100% { height: 0px; } } /* 定义关闭按钮样式 */ button.close { margin-top: 20px; padding: 10px 20px; background-color: #ff6a6a; border: none; border-radius: 5px; color: #fff; text-align: center; font-size: 16px; cursor: pointer; } /* 定义提示框样式 */ div.alert { height: 100px; background-color: #f1f1f1; border: 1px solid #ddd; border-radius: 5px; padding: 20px; transition: height 0.5s; } /* 给提示框添加动画效果 */ div.alert.hide { animation: close 0.5s 1; }

这是一条提示信息！

关闭// 关闭提示框 function closeAlert() { var alert = document.getElementById("alert"); alert.className = "alert hide"; }

上面的代码中，我们使用了CSS3中的动画效果来实现提示框关闭时的动画过渡效果。首先，我们定义了一个名为“close”的动画，该动画会将提示框的高度从100px变为0px。然后，我们将提示框的高度设置为100px，并添加了一个变换效果，即在0.5秒内完成高度从100px到0px的转变。最后，我们在关闭按钮的点击事件中，让提示框添加了一个“hide”的类名，从而触发动画效果，并让提示框慢慢消失。这样，我们就实现了一个简单的CSS关闭动画效果。