HTML彈幕祝福代碼
<html>
<head>
<title>HTML彈幕祝福</title>
<style>
#barrage {
position: absolute;
top: 0;
height: 100%;
width: 100%;
overflow: hidden;
z-index: 1;
}
.word {
position: absolute;
color: #fff;
text-shadow: 1px 1px #000;
white-space: nowrap;
font-size: 28px;
font-weight: bold;
font-family: '微軟雅黑';
animation-duration: 8s;
animation-timing-function: linear;
display: inline-block;
}
.animate:hover .word {
animation-play-state: paused;
}
.animate.active .word {
animation-play-state: running;
}
@keyframes barrage {
0% {
right: -100%;
}
100% {
right: 100%;
}
}
</style>
</head>
<body>
<div id="barrage"></div>
<script>
var notification = ["祝福內容1", "祝福內容2", "祝福內容3", "祝福內容4", "祝福內容5"];
setInterval(function () {
var word = document.createElement("div");
var text = document.createTextNode(notification[Math.floor(Math.random() * notification.length)]);
word.style.right = "-300px";
word.style.top = Math.random() * (window.innerHeight - 50) + "px";
word.appendChild(text);
word.className = "word animate active";
document.getElementById("barrage").appendChild(word);
}, 2000);
</script>
</body>
</html>上述代碼是一個簡單的HTML彈幕祝福代碼，可以通過修改“祝福內容”數組中的內容來實現不同的彈幕祝福效果。
上一篇mysql判斷某值不存在
下一篇html彈出框代碼 免費