HTML+CSS制作的动画loading效果

最新推荐文章于 2025-01-22 08:03:43 发布

原创

最新推荐文章于 2025-01-22 08:03:43 发布 · 379 阅读

收录于

当前文章被以下社区和专栏收录：

本文分享了一次尝试使用HTML+CSS创建加载动画的效果，旨在改善反向代理加载时间较长的问题。然而，实际应用中发现加载loading本身反而延长了页面打开时间，尤其在移动端存在显示偏移的问题，因此未采用。尽管如此，该加载动画在PC端表现正常，可供参考。

本来反向代理加载速度就慢，想做个loading效果打发下加载时间。没想到加了之后更慢。光打开loading就要半天。所以弃用了。放这里给大家参考下。pc端效果正常，移动端会偏移。

效果图：

HTML:

<div class="loading" >
    <div class="header w ">
        <img class="head-sculpture" src="https://blog.csdn.net/%7B%%20static'dog1.gif' %}" alt="头像">
        <div class="transparent">
            <div class="self-evaluation">若不是因为喜欢，谁愿意当舔狗</div>
        </div>
        <div class="self-evaluation_son">舔狗，舔狗，舔到最后一无所有</div>
    </div>
    <img id="dogrun" src="https://blog.csdn.net/%7B%%20static'rundog4.gif' %}" alt="">
</div>

JS:

loading = document.querySelector('.header');
header = document.querySelector('.header');
odiv = document.querySelector('.transparent');
sdiv = document.querySelector('.self-evaluation');
dogrun = document.querySelector('#dogrun');
web_bg

标签