走马灯项目案例（css+JS 技术）

最新推荐文章于 2024-06-03 20:03:03 发布

程序猿小猿。

最新推荐文章于 2024-06-03 20:03:03 发布

阅读量654

点赞数

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/cd001_/article/details/131561139

版权

文章详细介绍了如何使用HTML的div元素、CSS的@keyframes规则以及JavaScript来创建一串走马灯效果。通过设置不同的动画延迟时间和颜色变化序列，实现了多个div元素颜色的循环变换，从而达到视觉上的走马灯动画效果。

摘要由CSDN通过智能技术生成

走马灯完整实现效果如下：

分析：

实现代码如下：

走马灯完整实现效果如下：

走马灯

分析：

首先设置10个div用来展示每行走马灯的效果，然后设置父元素块css样式（即每行走马灯的上边界），接着设置每个走马灯样式（这里注意背景色要设置为白色）。

对于走马灯颜色改变的动画，需要用到@keyframes 这个函数，它里面的20%表示动画的进度（如：0%表示动画刚开始，100%表示动画完成），最后设置单行每个走马灯的动画延迟时间。

以上只是完成了单行走马灯的效果，对于10行走马灯的效果实现还需要用到JavaScript技术。首先，获取body标签；然后，循环10次单行走马灯。这样即可实现文章开头展示的效果。

实现代码如下：

body部分代码：

<body id="body">
    <div class="f">

        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>

    </div>
</body>

css代码：

<style>
         /*父元素块样式*/
        .f{
            width: 800px;
            height: 100px;
            border-top: 1px solid blue;
        }  
         /*子元素块样式*/   
        .f>div{
            width: 60px;
            height: 40px;
            background-color: white;
            border-radius: 50%;
            float: left;
            margin-left: 20px;
        }
        /*改变颜色样式动画*/
        @keyframes changecolor {
            0%{
                    background-color: rgb(255, 0, 55);
            }20%{
                background-color: rgb(187, 255, 0);
            }40%{
                background-color: rgb(255, 0, 238);
            }60%{
                background-color: rgb(0, 0, 255);
            }80%{
                background-color: rgb(0, 255, 42);
            }100%{
                background-color: rgb(255, 0, 225);
            }
        }

        /*每串走马灯颜色改变动画*/
        .f>div:nth-child(1){
            animation: changecolor 3s ease 0s infinite ;
        }
        .f>div:nth-child(2){
            animation: changecolor 3s ease 1s infinite ;
        }
        .f>div:nth-child(3){
            animation: changecolor 3s ease 2s infinite ;
        }
        .f>div:nth-child(4){
            animation: changecolor 3s ease 3s infinite ;
        }
        .f>div:nth-child(5){
            animation: changecolor 3s ease 4s infinite ;
        }
        .f>div:nth-child(6){
            animation: changecolor 3s ease 5s infinite ;
        }
        .f>div:nth-child(7){
            animation: changecolor 3s ease 6s infinite ;
        }
        .f>div:nth-child(8){
            animation: changecolor 3s ease 7s infinite ;
        }
        .f>div:nth-child(9){
            animation: changecolor 3s ease 8s infinite ;
        }
        .f>div:nth-child(10){
            animation: changecolor 3s ease 9s infinite ;
        }
        
    </style>

JS部分代码：

<script>
    //获取
    let body=document.getElementById('body')
    let s=''
    for(let i = 0;i<10;i++){
        s+=`<div class="f">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>`
    }
    body.innerHTML=s
</script>