使用CSS3实现加载中动画

最新推荐文章于 2024-07-16 15:32:05 发布

陈田田

最新推荐文章于 2024-07-16 15:32:05 发布

阅读量2.6k

点赞数 1

分类专栏： CSS 前端集结号文章标签： CSS3 加载中动画

本文链接：https://blog.csdn.net/candy_tity/article/details/53332995

版权

本文介绍了如何利用CSS3来实现加载中动画，旨在在请求数据期间为用户提供明确的反馈，避免因等待而导致的迷茫感。通过CSS3，可以创建更平滑且无锯齿的加载动画，替代传统的GIF图片。

摘要由CSDN通过智能技术生成

在用户访问页面的过程中，可能需要请求数据，进行响应。
但是如果在等待数据的过程中不给用户任何提示，用户的感觉是迷茫的，所以我们经常会看到在请求数据的过程中添加一个loading的gif图片。

随着技术的发展，我们希望用简单的代码就能实现这个功能，同时解决由于GIF图片带来的锯齿的问题。

最近tity在做日本换乘APP内嵌h5页面的时候就遇到了这样的问题。
最终实现在请求数据时的效果：
这里写图片描述

代码为：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>加载中动画</title>
    <style type="text/css">
        .typing_loader{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            -webkit-animation: typing 1s linear infinite alternate;
               -moz-animation: Typing 1s linear infinite alternate;
                    animation: typing 1s linear infinite alternate;
            margin: 46px auto; /* Not necessary- its only for layouting*/  
            position: relative;
            left: -40px;
        }
        @-webkit-keyframes typin

最低0.47元/天解锁文章

陈田田

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用CSS3实现加载中动画

在用户访问页面的过程中，可能需要请求数据，进行响应。但是如果在等待数据的过程中不给用户任何提示，用户的感觉是迷茫的，所以我们经常会看到在请求数据的过程中添加一个loading的gif图片。随着技术的发展，我们希望用简单的代码就能实现这个功能，同时解决由于GIF图片带来的锯齿的问题。最近tity在做日本换乘APP内嵌h5页面的时候就遇到了这样的问题。最终实现在请求数据时的效果：<!DOCTYP
复制链接

扫一扫

专栏目录