2、css动画

了解css动画

在使用css动画之前需要定义一个动画效果。

@keyframe 动画效果名{
		
}

动画效果分为多个切入点，我们只需要设置好每个切入点的css样式 ，css会自动帮我们展现出动画效果：

• from:开始效果

• to:结束效果

• 使用number%的方式可以在任意时刻设置css动画的样式，取值为1-100

  @keyframes madeng {
       0%{background-color: blueviolet;}
       20%{background-color: orange}
       40%{background-color: rgb(50, 134, 50);}
       60%{background-color: rgb(234, 99, 99);}
       80%{background-color: yellow;}
       100%{background-color: greenyellow;}
  }
  

定义好了动画，就需要去使用它，通过animation属性绑定动画在我们的元素上

li:nth-child(1){
    animation: madeng 3s ease 0s infinite;
}

animation属性有7个值:

1. name:我们自定义的动画名（必须）
2. duration:执行动画的时间(必须)
3. timing-function:动画的速度曲线(必须)
4. delay：动画延迟执行时间
5. iteration-count:执行次数，可以是infinite表示一直执行
6. direction:是否在下一个周期逆向播放，默认取值为normal
7. fill-mode：动画不播放是需要用到的css样式

案例：走马灯

这个案例的实现思路：

1. 使用ul列表表示每一个圆
2. 使用css将列表项变成圆，并使它们背景颜色为白色
3. 创建动画
4. 为每一个列表项使用动画，越靠后的列表延迟越高

<div>
        <button id="add" οnclick="add()">生成</button>
        <input type="number" name="count" id="count">
    </div>
    <div id="body">
        <ul id="one">
            <li>
                <!-- 圆 -->
            </li>
            <li >
                <!-- 圆 -->
            </li>
            <li >
                <!-- 圆 -->
            </li>
            <li >
                <!-- 圆 -->
            </li>
            <li >
                <!-- 圆 -->
            </li>
        </ul>
    </div>

<style>
        ul{
            list-style: none;
            padding: 0px;
            border-top: 1px solid rebeccapurple;
        }
        li{
            display: inline-block;
            margin-right: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color:white;
            
        }
        li:nth-child(1){
            animation: madeng 3s ease 0s infinite;
        }
        li:nth-child(2){
            animation: madeng 3s ease 1s infinite;
        }
        li:nth-child(3){
            animation: madeng 3s ease 2s infinite;
        }
        li:nth-child(4){
            animation: madeng 3s ease 3s infinite;
            animation: name duration timing-function delay iteration-count direction fill-mode;
        }
        li:nth-child(5){
            animation: madeng 3s ease 4s infinite;
        }
        @keyframes madeng {
            0%{background-color: blueviolet;}
            20%{background-color: orange}
            40%{background-color: rgb(50, 134, 50);}
            60%{background-color: rgb(234, 99, 99);}
            80%{background-color: yellow;}
            100%{background-color: greenyellow;}
        }  
    </style>

效果图：