Html —— 表白弹幕 特效（效果，靠这份前端知识点PDF成功跳槽
要实现一个表白弹幕特效，你可以使用HTML、CSS和JavaScript。以下是一个简单的实现示例：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Secret Message</title>
<style>
.message {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background-color: #fff;
box-shadow: 0 -5px 5px rgba(0,0,0,0.5);
text-align: center;
font-family: 'Arial', sans-serif;
transition: bottom 1s;
}
.hidden {
bottom: -100px;
}
</style>
</head>
<body>
<div class="message">
你好，我是神秘来访者！<br>
想和你表白！
<button onclick="closeMessage()">关闭这个弹幕</button>
</div>
<script>
function closeMessage() {
var message = document.querySelector('.message');
message.classList.add('hidden');
}
</script>
</body>
</html>CSS:
.message {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background-color: #fff;
box-shadow: 0 -5px 5px rgba(0,0,0,0.5);
text-align: center;
font-family: 'Arial', sans-serif;
transition: bottom 1s;
}
.hidden {
bottom: -100px;
}JavaScript:
function closeMessage() {
var message = document.querySelector('.message');
message.classList.add('hidden');
}这个代码实现了一个表白弹幕，当用户点击关闭按钮时，弹幕会以动画效果（bottom 1s 的 transition）关闭，不再显示在页面底部。这个例子简单易懂，适合作为学习前端基础的练手项目。
评论已关闭