整体代码

HTML 实现自定义加载动画，话不多说如下代码所示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>html自定义加载动画</title>

    <style type="text/css">

        html,body{

            margin: 0;

            padding: 0;

        }

        .loading{

            position: absolute;

            top: 50%;

            left: 50%;

            margin-top: -50px;

            margin-left: -50px;

            animation: loading 2s linear infinite;

        }

        .loading img{

            width: 100px;

            height: 100px;

        }

        @keyframes loading {

            from{

                transform: rotate(0);

            }

            to{

                transform: rotate(360deg);

            }

        }

    </style>

</head>

<body>

    <div class="loading">

        <!-- 我是自定义加载动画 -->

        <img src="./images/loading.png" alt="">

    </div>

</body>

</html>

代码解释

 html,body{

     margin: 0;

     padding: 0;

}

如上，去掉浏览器给页面设置的默认边距

.loading{

  position: absolute;

  top: 50%;

  left: 50%;

  margin-top: -50px;

  margin-left: -50px;

  animation: loading 2s linear infinite;

}

给 class 为 loading 的标签居中显示和动画。

.loading img{

  width: 100px;

  height: 100px;

}

调整 loading 下图片的大小。

@keyframes loading {

  from{

    transform: rotate(0);

  }

  to{

    transform: rotate(360deg);

  }

}

设置名称为 loading 的动画，动画从 0° ~ 360°，转一圈。

后记

在编程当中，任何你看上去酷炫或者高大上的效果都是基础的东西实现的。我们老师也经常给学员强调，基础一定要打好，不要去盲目的追求高大上的写法。有些人，基础都没有学完就着急去学框架的内容，框架固然重要，但是基础的东西你没有学完，就注定了你没有发展前景。如果那一天 VUE、React 和 Angular 这些框架被新出来的框架淘汰了，那么你又要花很长时间去学习新的框架。这样的人才不是企业所需要的，可替代性太强，随便花一两个月就能教出一个会使用框架的人。但是若是你基础知识扎实，那么就能很平滑的对接任何框架，所花的学习成本也会很低，基本都能够快速上手。

其实多年开发经验的老鸟们都明白，编程到最后不是说你会多少框架，而是你对基础知识的理解和运用的程度。老鸟们都明白，最基础的东西最难。就跟金庸武侠中描述的那样，往往高手的最高境界是返璞归真，不会去追求招式的华丽，也不会追求厉害的武器。我们学这些技能的目的是什么？实现效果，解决问题。直达问题本质，实现一招制敌，这才是我们应该追求的。

html自定义加载动画的更多相关文章

  1. 【动画消消乐】HTML+CSS 自定义加载动画 061

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...

  2. 【动画消消乐】HTML+CSS 自定义加载动画：清新折叠方块效果 063（附源码及原理详解）

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...

  3. 【动画消消乐】HTML+CSS 自定义加载动画 064（currentColor的妙用！）

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...

  4. 【动画消消乐】HTML+CSS 自定义加载动画 065

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出-   自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...

  5. 【动画消消乐】HTML+CSS 自定义加载动画：怦然心跳 066

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出-   自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...

  6. ios 自定义加载动画效果

    在开发过程中,可能会遇到各种不同的场景需要等待加载成功后才能显示数据.以下是自定义的一个动画加载view效果.      在UIViewController的中加载等到效果,如下 - (void)vi ...

  7. 「HTML+CSS」--自定义加载动画【005】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  8. 「HTML+CSS」--自定义加载动画【006】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  9. 「HTML+CSS」--自定义加载动画【008】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

随机推荐

  1. CVPR2020：视觉导航的神经拓扑SLAM

    CVPR2020:视觉导航的神经拓扑SLAM Neural Topological SLAM for Visual Navigation 论文地址: http://openaccess.thecvf. ...

  2. 《精通 ASP.NET Core MVC (第七版)》开始发售

    学习 Web 开发技术很难吗?没有适合的学习资料,确实很枯燥,很难.如果有一本如同良师益友的优秀图书辅助,就很轻松,一点也不难! 对于优秀的技术图书来说,必须从读者的角度来编写,而不是从作者的角度来编 ...

  3. Qt项目ui文件中新添加的控件在代码中不识别的问题解决

    今天在学Qt框架的信号槽,然后发现在ui中加的控件,通过ui-> 找不到,没有识别,于是上网查找了一下问题 解决方法 添加ui控件后,执行程序,退出程序,将debug目录下的ui_XXXX.h拷 ...

  4. 【UG二次开发】获取对象类型 UF_OBJ_ask_type_and_subtype

    代码: int type=0, subtype=0; UF_OBJ_ask_type_and_subtype(objTag, &type, &subtype);

  5. [翻译]Go与C#的比较，第二篇：垃圾回收

    Go vs C#, part 2: Garbage Collection | by Alex Yakunin | ServiceTitan - Titan Tech | Medium 目录 译者注 什 ...

  6. 彻底解决Spring mvc中时间类型的转换和序列化问题

    在使用Spring mvc 进行开发时我们经常遇到前端传来的某种格式的时间字符串无法用java8时间包下的具体类型参数来直接接收.同时还有一系列的序列化 .反序列化问题,在返回前端带时间类型的同样会出 ...

  7. ceph-csi源码分析（5）-rbd driver-nodeserver分析（上）

    更多 ceph-csi 其他源码分析,请查看下面这篇博文:kubernetes ceph-csi分析目录导航 ceph-csi源码分析(5)-rbd driver-nodeserver分析(上) 当c ...

  8. Redisson 分布式锁实现之源码篇 → 为什么推荐用 Redisson 客户端

    开心一刻 一男人站在楼顶准备跳楼,楼下有个劝解员拿个喇叭准备劝解 劝解员:兄弟,别跳 跳楼人:我不想活了 劝解员:你想想你媳妇 跳楼人:媳妇跟人跑了 劝解员:你还有兄弟 跳楼人:就是跟我兄弟跑的 劝解 ...

  9. 附加数据库出现 无法打开物理文件 操作系统错误 5:拒绝访问 SQL

    刚刚从公司的电脑上考到自己刚刚装好系统的笔记本上面,出现了问题: 无法打开物理文件 操作系统错误 5:拒绝访问 . 网上找了下解决方法: 找到需要导入的  mdf和ldf  修改它的权限为完全控制,不 ...

  10. RabbitMQ重试机制

    消费端在处理消息过程中可能会报错,此时该如何重新处理消息呢?解决方案有以下两种. 在redis或者数据库中记录重试次数,达到最大重试次数以后消息进入死信队列或者其他队列,再单独针对这些消息进行处理: ...