css3加载动画

最新推荐文章于 2024-07-24 10:22:02 发布

想要成仙的菜鸟前端

最新推荐文章于 2024-07-24 10:22:02 发布

阅读量474

点赞数

文章标签：动画 css3 css

本文链接：https://blog.csdn.net/qq_44441669/article/details/125299558

版权

CSS动画 JavaScript 视频逐帧 opacity setInterval

关键词由CSDN通过智能技术生成

Video_2022-06-15_164338

<div class="test-ul" ref="testUrl">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>




     $('.test-ul ul li').each((index, item) => {
            item.style.opacity = 1 - index / 10;
        })
        // 1 0.9 0.8 0.7 
        setInterval(() => {
            $('.test-ul ul li').each((index, item) => {
                if (item.style.opacity == 0) {
                    item.style.opacity = 1
                }
                item.style.opacity = parseFloat(item.style.opacity) - 0.1
            })
        }, 100)