簡單彈幕第二彈（c3animate實現）

半勺鹽發表於2020-12-28

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>

相關文章