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语言结识编程,随后转入计算机 ...
随机推荐
- Springboot-Redis分布式锁 -----StringRedisTemplate
这里引用别人, 用来自己回忆 https://blog.csdn.net/jack_shuai/article/details/91986690 https://www.cnblogs.com/mox ...
- 操作系统-Linux命令
一.目录结构 #因为根目录与开机有关,开机过程中仅有根目录会被挂载, 因此根目录下与开机过程有关的目录(以下5个),不能与根目录放到不同的分区去. /etc:配置文件 /dev:所需要的装置文件 /l ...
- java并发编程工具类JUC第八篇:ConcurrentHashMap
在之前的文章中已经为大家介绍了java并发编程的工具:BlockingQueue接口.ArrayBlockingQueue.DelayQueue.LinkedBlockingQueue.Priorit ...
- 【Android编程】android平台的MITM瑞士军刀_cSploit源码解析及中间人攻击复现
/文章作者:Kali_MG1937 作者博客ID:ALDYS4 QQ:3496925334 未经允许,禁止转载/ 何为MITM欺骗,顾名思义,中间人攻击的含义即为在局域网中充当数据包交换中间人的角色 ...
- IntelliJ IDEA不好用？那是因为没掌握这些技巧
想要愉快的coding,一个好的IDE肯定少不了.而对于Java开发者来说,IntelliJ IDEA绝对是Java-IDE的首屈一指的选择(eclipse党还请绕我一命). 从我第一次下载IDEA到 ...
- NOIP模拟测试38「金·斯诺·赤」
金 辗转相减见祖宗 高精 #include<bits/stdc++.h> using namespace std; #define A 2000 #define P 1 #define N ...
- 聊聊 Feign 的实现原理
What is Feign? Feign 是⼀个 HTTP 请求的轻量级客户端框架.通过 接口 + 注解的方式发起 HTTP 请求调用,面向接口编程,而不是像 Java 中通过封装 HTTP 请求报文 ...
- 渗透测试工具Burpsuite操作教程
Burpsuite简介 Burp Suite 是一款专业的Web和移动应用程序渗透测试工具,是用于攻击web 应用程序的集成平台,包含了许多工具.Burp Suite为这些工具设计了许多接口,以加快攻 ...
- NTLM协议与Pass the Hash的爱情
0x01.前言 NTLM使用在Windows NT和Windows 2000 Server或者之后的工作组环境中(Kerberos用在域模式下).在AD域环境中,如果需要认证Windows NT系统, ...
- Java小工具类
计时器(秒表),计算程序运行时间用的 public class Stopwatch { private static long startTime=0; private static long end ...