图片或按钮用动画一个个显示出来_ul的li做一个一个一个显示的动画效果-优快云博客

本文链接：https://blog.youkuaiyun.com/kilito_01/article/details/121357435

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul>li {
            width: 20px;
            height: 50px;
            background-color: brown;
            border: 1px solid #000;
            /* 先把所有的透明度都为0，再用动画一个个显示出来 */
            opacity: 0;  
        }

        ul>li:nth-of-type(4n+1) {
            background-color: aqua;
             /* 第一个2s 是指定一个动画周期的时长 */
             /* 第二个秒数 是定义动画于何时开始 */
             /* forwards ：动画结束后（由 animation-iteration-count 决定），动画将应用该属性值 动画完成后就停止 */
             /* 1 ： animation-iteration-count属性定义动画应该播放多少次。 */
              /* ease-in-out ： 开始和结束速度都是缓慢*/
            animation: show 2s 0s 1 forwards ease-in-out;
        }
        ul>li:nth-of-type(4n+2) {
            background-color: aqua;
            animation: show 2s 0.5s 1 forwards ease-in-out;
        }
        ul>li:nth-of-type(4n+3) {
            background-color: aqua;
            animation: show 2s 1s 1 forwards ease-in-out;
        }
        ul>li:nth-of-type(4n+4) {
            background-color: aqua;
            animation: show 2s 1.5s 1 forwards ease-in-out;
        }
    

        @keyframes show {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      
    </ul>
</body>

</html>