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语言结识编程,随后转入计算机 ...
随机推荐
- [源码解析] 深度学习分布式训练框架 horovod (3) --- Horovodrun背后做了什么
[源码解析] 深度学习分布式训练框架 horovod (3) --- Horovodrun背后做了什么 目录 [源码解析] 深度学习分布式训练框架 horovod (3) --- Horovodrun ...
- 03：进程Queue --- 生产者消费者模型
1 进程Queue介绍 1 进程间数据隔离,两个进程进行通信,借助于Queue2 进程间通信:IPC -借助于Queue实现进程间通信 -借助于文件 -借助于数据库 -借助 ...
- 题解 P3232 [HNOI2013]游走
洛谷P3232[NOI2013]游走 题目描述 给定一个 n 个点 m 条边的无向连通图,顶点从 1 编号到 n,边从 1 编号到 m. 小 Z 在该图上进行随机游走,初始时小 Z 在 1 号顶点,每 ...
- FreeRTOS移植EasyFlash
1. EasyFlash Easyflash可以让 Flash 成为小型 KV 数据库(Key-Value) GitHub: https://github.com/armink/SFUD Gitee: ...
- PRVF-0002: could not retrieve local nodename报错解决
- 解决 Golnag Gin框架跨域
package main import ( "github.com/gin-gonic/gin" "awesomeProject/app/app_routers" ...
- 美化terminal时碰到的问题- Set-Theme
报错: 1 Set-Theme Set-Theme: The term 'Set-Theme' is not recognized as a name of a cmdlet, function, s ...
- css 设置body背景图片铺满
background-image: url(../../../assets/images/workflow/work.png); background-repeat: no-repeat; backg ...
- SDLC开发安全流程
2020年12月9日跟内部小伙伴分享SDLC流程及安全的一些思考,简单画了一个图,时间过得太快,记录一下 参考 https://blog.csdn.net/liqiuman180688/article ...
- CentOS-搭建MinIO集群
一.基础环境 操作系统:CentOS 7.x Minio在线演示 Minio下载 二.准备工作 2.1.机器资源 192.168.1.101 /data1 192.168.1.102 /data2 1 ...