Css3 animate属性实现弹幕效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 720px;
height: 450px;
margin: 100px auto;
}
video,
input {
outline: none;
}
input {
width: 554px;
height: 26px;
}
input[type="color"] {
width: 50px;
height: 28px;
vertical-align: middle;
}
button {
width: 100px;
height: 30px;
cursor: pointer;
}
#mv {
width: 720px;
height: 406px;
font-size: 20px;
font-weight: 500;
position: relative;
margin-bottom: 5px;
overflow: hidden;
}
span {
animation: go 10s linear 1;
/* 强制一行显示 */
white-space: nowrap;
/* */
letter-spacing: 1px;
/* transform-origin: right; */
display: inline-block;
}
@keyframes go {
0% {
transform: translate(0);
}
100% {
/* 不可行 */
/* transform: translate(calc(-100%)); */
/* 不可行 */
/* transform: translate(calc(-100%-720px)); */
/* 通过限制字符长度，强制计算的结果 */
transform: translate(-1350px);
}
}
</style>
</head>
<body>
<div class="box">
<div id="mv">
<video src="./jay.mp4" controls></video>
</div>
<!-- maxlength 最多可输入20个字符 -->
<input type="text" id="txt" maxlength="30">
<input type="color" id="color">
<button id="btn">发送</button>
</div>
<script>
// 获取元素
var color = document.getElementById("color")
var txt = document.getElementById("txt")
var mv = document.getElementById("mv")
var btn = document.getElementById("btn")
// 存储默认颜色值
var newColor = '#000';
// 获取到更换的颜色值
color.onchange = function () {
newColor = color.value
}
// 给发送按钮注册事件
btn.onclick = function () {
var span = document.createElement("span")
// 设置弹幕颜色
span.style.color = newColor
// 把txt的value值赋值给span
span.innerText = txt.value
// 给绝对定位脱标
span.style.position = "absolute"
// 设置动画，秒数随机
var s = Math.random() * 12 + 5
span.style.animation = `go ${
s}s linear 1`
// 随机定位top
span.style.top = Math.random() * 350 + 5 + 'px'
// 设置上层显示
span.style.zIndex = "50"
// 将span放到mv盒子里
mv.appendChild(span)
// 发送后清空txt文本框
txt.value = ""
// 定时清除弹幕标签
var time = s * 1000
setTimeout(function () {
mv.removeChild(span)
}, time)
}
// 按Enter触发 发送按钮的点击事件
document.onkeydown = function (e) {
if (e.keyCode === 13)
btn.click();
}
</script>
</body>
</html>