Html —— 表白弹幕 特效(效果+代码)
在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>表白弹幕</title>
<style>
#love {
position: fixed;
bottom: 0;
right: 0;
padding: 10px;
background-color: #ffc1cc;
color: #ff0000;
font-size: 20px;
border: 1px solid #ff0000;
border-radius: 5px;
z-index: 9999;
}
#close {
float: right;
cursor: pointer;
}
</style>
</head>
<body>
<div id="love">
<span>我爱你!</span>
<span id="close">X</span>
</div>
<script>
// 获取弹幕元素和关闭按钮
var love = document.getElementById('love');
var close = document.getElementById('close');
// 当点击关闭按钮时,隐藏弹幕
close.onclick = function() {
love.style.display = 'none';
}
</script>
</body>
</html>
这段代码会在页面底部显示一个表白弹幕,并且有一个关闭按钮允许用户关闭它。弹幕通过CSS设置样式,并通过JavaScript添加了关闭的交互功能。
评论已关闭