前端常用js、css效果

本文介绍: 前端常用js、css效果，包括无缝轮播，无缝滚动，文字滚动等

前端常用js效果

效果

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

文本横向滚动
文本无限滚动
无缝轮播
无缝滚动
盒子上下滚动
樱花飘落效果

参考代码

文本横向滚动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>横向滚动文字</title>
</head>

<body>
    <div class="scroll-container">
        <div class="scroll-content">
            <p>这是要滚动的文本内容。</p>
        </div>
    </div>
    <style>
        .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%);
            }
        }
    </style>
</body>

</html>

文本无限滚动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <div class="list">
            <div>1.这是一段文字</div>
            <div>2.这是一段文字</div>
            <div>3.这是一段文字</div>
            <div>4.这是一段文字</div>
            <div>5.这是一段文字</div>
            <div>6.这是一段文字</div>
            <div>7.这是一段文字</div>
            <div>8.这是一段文字</div>
        </div>
    </div>

    <style>
        .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;
        }
    </style>
    <script>
        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()
        }

    </script>
</body>

</html>

无缝轮播

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <div class="list">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
    </div>

    <style>
        .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;
        }
    </style>

    <script>
        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);

    </script>
</body>

</html>

无缝滚动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <div class="list">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>

    <style>
        .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;
        }
    </style>
    <script>
        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()
        }

    </script>
</body>

</html>

盒子上下移动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <div class="box1">
        </div>
    </div>

    <style>
        .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;
        }
    </style>

</body>
<script>
    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)
    })
</script>

</html>

樱花飘落

添加插件sakura.js就可以了，不用什么代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <body>
        <script src="https://cdn.jsdelivr.net/gh/1999cyx/cdn@2.0/js/sakura.js"></script>
    </body>
</body>

</html>