js灯珠璀璨（js动画走马灯）

1.建立初始对象框架

<button onclick="generate()">生成</button>
<input id="inputs" type="text" >行

    <div class="f">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

2.设置css样式 （灯珠线）

.f{
        margin-top: 5px;
        width:800px;
        height:100px;
        border-top:1px solid rebeccapurple

    }

3.对div对象设置样式（灯珠）

初始颜色为其他与背景色不相关的颜色
后面设置背景色为white(白色)为后面添加样式动画做准备

 .f>div{
        width: 50px;
        height: 40px;
        background-color: white;
        border-radius: 50%;
        float: left;
        margin-left: 20px;
    }

4.添加动画（散发光彩）

使用百分度为动画的进行过渡

 @keyframes changeColor{
        0%{
            background-color: red;
        }
        25%{
            background-color: orange;
        }
        50%{
            background-color: yellow;
        }
        75%{
            border-color: green;
        }
        100%{
            background-color: purple;
        }
    }

5.调用动画

nth-child(n) 选择器选取属于其父元素的不限类型的第 n 个子元素的所有元素
使用nth-child(n)来选取f类下的div 元素，进行动画调用
animation：绑定动画事件的属性
用法如下

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation: changeColor 3s ease 0s infinite;：这句意思是
name: 调用changeConlor动画事件
duration :持续时间为3s
timing-function:动画以低速开始，然后加快，在结束前变慢
delay : 延持动画开启时间为0s
iteration-count: 动画播放次数无限次

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

6.为按钮添加事件(想要几条灯串就要几条)

获取整个div的对象并保存在变量body中
获取Input输入框的内容作为循环的次数限制并用变量inputs保存

<script>
     let body=document.getElementById("body")    
     let s='';
    function generate(){
        let inputs=document.getElementById("inputs").value;
        for(let i=0;i<inputs;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>
            `
        }
        body.innerHTML=s
    }

</script>

走马灯

总结

以上所给的文字描述皆为我觉得重要的地方，希望对各位有所帮助(//<>//)