HTML+CSS制作的动画loading效果

最新推荐文章于 2023-12-22 10:06:15 发布

sars945

最新推荐文章于 2023-12-22 10:06:15 发布

阅读量321

点赞数

文章标签： css javascript html5

本文链接：https://blog.youkuaiyun.com/sars945/article/details/108197142

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

效果图：

HTML:

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

JS: