Html —— 表白弹幕 特效（效果，已开源
warning:
这篇文章距离上次修改已过440天，其中的内容可能已经有所变动。
在HTML中创建一个表白弹幕特效，可以使用JavaScript和CSS来实现。以下是一个简单的实现示例：
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>
#loveMessage {
position: fixed;
bottom: 0;
right: 0;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #dcdcdc;
border-radius: 5px;
z-index: 1000;
opacity: 0;
transition: all 0.5s ease;
}
#loveMessage.active {
opacity: 1;
}
</style>
</head>
<body>
<div id="loveMessage">
他/她喜欢你！
</div>
<script>
// 设置一个随机的几率来显示弹幕，例如50%
const showProbability = 0.5;
const loveMessage = document.getElementById('loveMessage');
// 显示弹幕的函数
function showLoveMessage() {
loveMessage.classList.add('active');
// 延迟关闭弹幕，可以根据需要调整时间
setTimeout(() => loveMessage.classList.remove('active'), 5000);
}
// 判断是否显示弹幕
if (Math.random() < showProbability) {
showLoveMessage();
}
</script>
</body>
</html>这段代码实现了一个随机弹幕，当页面加载时，如果随机数小于设定的显示概率，则弹幕会随机显示。弹幕会在一段时间后自动消失。CSS用于制作弹幕的样式，JavaScript用于控制弹幕的显示和隐藏。弹幕的内容和显示概率可以根据需要进行自定义。
评论已关闭