html自定义加载动画
整体代码
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自定义加载动画的更多相关文章
- 【动画消消乐】HTML+CSS 自定义加载动画 061
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...
- 【动画消消乐】HTML+CSS 自定义加载动画：清新折叠方块效果 063（附源码及原理详解）
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...
- 【动画消消乐】HTML+CSS 自定义加载动画 064（currentColor的妙用！）
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...
- 【动画消消乐】HTML+CSS 自定义加载动画 065
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...
- 【动画消消乐】HTML+CSS 自定义加载动画：怦然心跳 066
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...
- ios 自定义加载动画效果
在开发过程中,可能会遇到各种不同的场景需要等待加载成功后才能显示数据.以下是自定义的一个动画加载view效果. 在UIViewController的中加载等到效果,如下 - (void)vi ...
- 「HTML+CSS」--自定义加载动画【005】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...
- 「HTML+CSS」--自定义加载动画【006】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...
- 「HTML+CSS」--自定义加载动画【008】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...
随机推荐
- Redis五种基础与三种高级数据结构解析
记得点赞+关注呦. 前言 在 Redis 最重要最基础就属 它丰富的数据结构了,Redis 之所以能脱颖而出很大原因是他数据结构丰富,可以支持多种场景.并且 Redis 的数据结构实现以及应用场景在面 ...
- DFS————从普及到IOI（暴力骗分小能手）
DFS 啦啦啦,再来水一波 先说思想吧! 背景: 深度优先搜索算法(英语:Depth-First-Search,简称DFS)是一种用于遍历或搜索树或图的算法. ----来自度娘 一.思想 DFS算法思 ...
- 「10.17-10.18」liu_runda’s模拟
暂咕 $day1$ A. 位运算 分类讨论,贡献分离. B. 集合论 维护类似时间戳的东西 C. 连连看 考场思路太局限了,考虑容斥. 我们可以看出两个方块能作出贡献,实际上是一个极大联通块(白块)所 ...
- Drools规则引擎实践直白总结
目录 1. 创建Drools环境(引入Drools相关依赖包.现在都流行spring boot,故最简单有效的依赖才是最好的,kie-spring内部自行依赖了drools相关核心的依赖包) 2. 了 ...
- ceph-csi源码分析（2）-组件启动参数分析
更多ceph-csi其他源码分析,请查看下面这篇博文:kubernetes ceph-csi分析目录导航 ceph-csi源码分析(2)-组件启动参数分析 ceph-csi组件的源码分析分为五部分: ...
- Java并发之Semaphore源码解析（一）
Semaphore 前情提要:在学习本章前,需要先了解笔者先前讲解过的ReentrantLock源码解析,ReentrantLock源码解析里介绍的方法有很多是本章的铺垫.下面,我们进入本章正题Sem ...
- Springboot下载Excel的3种方式
Springboot下载Excel的3种方式 汇总一下浏览器下载和代码本地下载实现的3种方式. (其实一般都是在代码生成excel,然后上传到oss,然后传链接给前台,但是我好像没有实现过直接点击就能 ...
- Kubernetes的认证机制
1.了解认证机制 API服务器可以配置一到多个认证的插件(授权插件同样也可以).API服务器接收到的请求会经过一个认证插件的列表,列表中的每个插件都可以检查这个请求和尝试确定谁在发送这个请求.列表中的 ...
- 美化terminal时碰到的问题- Set-Theme
报错: 1 Set-Theme Set-Theme: The term 'Set-Theme' is not recognized as a name of a cmdlet, function, s ...
- 103、kickstart自动化安装操作系统
103.1.前言: 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装. 常规的办法有: 光盘安装系统===>一个 ...