整体代码

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. 记 Ant Designer Vue 2.0.1 layout 丢失样式类名问题分析

    现象 <a-layout-sider /> 渲染到页面上会变成 <section class="undefined-has-sider"> 丢失了 layo ...

  2. python_xlutils : python利用xlutils修改表格内容

    一.xlutils是什么 是一个提供了许多操作修改excel文件方法的库: 属于python的第三方模块 xlrd库用于读取excel文件中的数据,xlwt库用于将数据写入excel文件,修改用xlu ...

  3. mybatis学习——使用注解开发

    前言: 一个语句既可以通过 XML 定义,也可以通过注解定义.不过,由于 Java 注解的一些限制以及某些 MyBatis 映射的复杂性,要使用大多数高级映射(比如:嵌套联合映射),仍然需要使用 XM ...

  4. js正则中文

    hi,大家好 今天跟小伙伴们浅谈以下如何用正则表示中文以及如何去运用.众所周知中文在计算机中是不能进行存储的.那我们是以什么办法让我们和计算机进行更好的沟通呢?常用的几种中文编码格式utf-8编码ut ...

  5. 2、java基础语法（上）：变量与运算符

    关键字与保留字 关键字 定义:被Java语言赋予了特殊含义,用做专门用途的字符串(单词) 特点:关键字中所有字母都为小写 官方地址:https://docs.oracle.com/javase/tut ...

  6. NOIP模拟测试4「礼物·通讯·奇袭」

    礼物. 首先见到期望一定要想dp,看到n的范围无脑想状压, 然后我就只想到这了. dp方程式还是比较好想的,但是我依然想不出来 略经思考   颓题解 依然不会,随便写了个式子 i状态中不含j $f[i ...

  7. [Azure DevOps] 如何使用任务组

    1. 使用 PowerShell 脚本 在上一篇文章中我们学会了怎么使用扩展在编译前实时更改版本号.有些情况下我们希望不适用扩展,例如喜欢发明轮子,或者根本没有安装扩展的权限.这时候我们可以自己写 P ...

  8. Linux添加永久静态路由

    1.首先查看一下本机的路由 route -n 2.比如我们添加两条静态路由,访问192.168.142.100时通过192.168.142.10:访问192.168.142.200时通过192.168 ...

  9. Spring WebFlux 教程：如何构建反应式 Web 应用程序

    Spring WebFlux 教程:如何构建反应式 Web 应用程序 反应式系统提供了我们在高数据流世界中所需的无与伦比的响应能力和可扩展性.然而,反应式系统需要经过专门培训的工具和开发人员来实现这些 ...

  10. Java并发之Semaphore源码解析（二）

    在上一章,我们学习了信号量(Semaphore)是如何请求许可证的,下面我们来看看要如何归还许可证. 可以看到当我们要归还许可证时,不论是调用release()或是release(int permit ...