前端常用js、css效果

02-27 1176阅读 0评论

前端常用js效果

效果
参考代码
文本横向滚动
文本无限滚动
无缝轮播
无缝滚动
盒子上下移动

樱花飘落

效果

主要整理了几个常用的，方便平时做项目的时候参考

$前端常用js、css效果,前端常用js、css效果,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,前端,插件,速度,第1张$

（图片来源网络，侵删）

文本横向滚动

文本无限滚动

无缝轮播

无缝滚动

盒子上下滚动

樱花飘落效果

$前端常用js、css效果,前端常用js、css效果,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,前端,插件,速度,第2张$

（图片来源网络，侵删）

参考代码

文本横向滚动



    
    
    
    横向滚动文字


    
        
            这是要滚动的文本内容。
        
    
    
        .scroll-container {
            width: 300px;
            height: 30px;
            margin: 20px auto;
            border: 1px solid gray;
            display: flex;
            align-items: center;
            overflow: hidden;
            white-space: nowrap;
        }
        .scroll-content {
            display: inline-block;
            animation: scroll 10s linear infinite;
            /* 调整滚动速度，单位为秒 */
        }
        @keyframes scroll {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(-100%);
            }
        }

文本无限滚动



    
    
    Document


    
        
            1.这是一段文字
            2.这是一段文字
            3.这是一段文字
            4.这是一段文字
            5.这是一段文字
            6.这是一段文字
            7.这是一段文字
            8.这是一段文字
        
    
    
        .box {
            margin: 20px auto;
            width: 300px;
            height: 160px;
            overflow: hidden;
            position: relative;
            border: 1px solid gray;
        }
        .list {
            position: absolute;
            top: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .list>div {
            width: 300px;
            height: 20px;
            box-sizing: border-box;
        }
    
    
        let list = document.querySelector(".list");
        let box = document.querySelector(".box");
        list.innerHTML += list.innerHTML;
        let currentTop = 0;
        let timer;
        const move = () => {
            timer = setInterval(() => {
                currentTop -= 2;
                if (currentTop == -(6 * 20)) {
                    currentTop = 0
                }
                list.style.top = currentTop + 'px'
            }, 20)
        }
        move()
        box.onmouseenter = () => {
            clearInterval(timer)
        }
        box.onmouseleave = () => {
            move()
        }

无缝轮播



    
    
    Document


    
        
            1
            2
            3
            4
        
    
    
        .box {
            width: 320px;
            height: 80px;
            overflow: hidden;
            position: relative;
            border: 1px solid gray;
            margin: 20px auto;
        }
        .list {
            position: absolute;
            left: 0;
            display: flex;
            align-items: center;
            transition: left 0.5s ease; /* Added transition property */
        }
        .list>div {
            width: 80px;
            height: 80px;
            border: 1px solid gray;
            box-sizing: border-box;
        }
    
    
        let list = document.querySelector(".list");
        list.innerHTML += list.innerHTML;
        let left = 0;
        setInterval(() => {
            left -= 80;
            if (left === -(5 * 80)) {
                list.style.transition = "none"; // Remove transition
                left = 0;
                setTimeout(() => {
                    list.style.transition = "left 0.5s ease"; // Restore transition after a short delay
                }, 0);
            }
            list.style.left = left + "px";
        }, 2000);

无缝滚动



    
    
    Document


    
        
            1
            2
            3
            4
            5
            6
        
    
    
        .box {
            margin: 20px auto;
            width: 300px;
            height: 80px;
            overflow: hidden;
            position: relative;
            border: 1px solid gray;
        }
        .list {
            position: absolute;
            left: 0;
            display: flex;
            align-items: center;
        }
        .list>div {
            width: 80px;
            height: 80px;
            border: 1px solid gray;
            box-sizing: border-box;
        }
    
    
        let list = document.querySelector(".list");
        let box = document.querySelector(".box");
        list.innerHTML += list.innerHTML;
        let left = 0;
        let timer;
        const move = () => {
            timer = setInterval(() => {
                left -= 2;
                if (left == -(6 * 80)) {
                    left = 0
                }
                list.style.left = left + 'px'
            }, 20)
        }
        move()
        box.onmouseenter = () => {
            clearInterval(timer)
        }
        box.onmouseleave = () => {
            move()
        }

盒子上下移动



    
    
    Document


    
        
        
    
    
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid gray;
            margin: 0 auto;
            position: relative;
        }
        .box1 {
            width: 50px;
            height: 50px;
            background: skyblue;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            transition: top 1s ease-in-out;
        }
    


    document.addEventListener("DOMContentLoaded", function () {
        let box = document.querySelector(".box")
        let box1 = document.querySelector(".box1")
        setInterval(() => {
            let currentTop = parseInt(window.getComputedStyle(box1).top);
            let newTop = (currentTop == 0) ? box.clientHeight - box1.clientHeight : 0;
            box1.style.top = newTop + 'px';
        }, 1000)
    })