前言

Hello!小伙伴!

非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~

 

自我介绍 ଘ(੭ˊᵕˋ)੭

昵称:海轰

标签:程序猿|C++选手|学生

简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)

学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!

【动画消消乐】 平时学习生活比较枯燥,无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣,想知道具体是如何实现的? 便在空闲的时候学习下如何使用css实现一些简单的动画效果,文章仅供作为自己的学习笔记,记录学习生活,争取理解动画的原理,多多“消灭”动画!

效果展示(初始版)

Demo代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section><span></span></section>
</body>
</html>

CSS

html, body {
margin: 0;
height: 100%;
} body {
display: flex;
justify-content: center;
align-items: center;
background: #ed556a;
/* background-color: #82466e; */
animation: backColor 4s infinite;
} section {
width: 650px;
height: 300px;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
} span {
width: 12px;
height: 64px;
border-radius: 4px;
display: inline-block;
position: relative;
background: currentColor;
color: white;
/* background-color: red; */
animation: animloader61m 1s 1s linear infinite alternate;
} span::before, span::after {
content: '';
width: 12px;
height: 64px;
border-radius: 4px;
background: currentColor;
position: absolute;
bottom: 0;
left: 20px;
animation: animloader61 1s 1.5s linear infinite alternate;
} span::after {
left: -20px;
animation-delay: 0s;
} @keyframes animloader61 {
0% {
height: 64px;
}
100% {
height: 5px;
}
} @keyframes animloader61m {
0% {
height: 64px;
transform: translateY(0);
}
100% {
height: 15px;
transform: translateY(30px)
}
}

仔细观察效果图,其实可以明显发现整个白色部分整体也在上下移动,只是移动距离较小。

感觉要是下方可以固定住就行了,为此,在源代码基础上修改了一下,得到改进后的效果,如下:

效果展示(改进版)

Demo代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section><span></span></section>
</body>
</html>

CSS

html, body {
margin: 0;
height: 100%;
} body {
display: flex;
justify-content: center;
align-items: center;
background: #ed556a;
/* background-color: #82466e; */
animation: backColor 4s infinite;
} section {
width: 650px;
height: 300px;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
} span {
width: 12px;
height: 64px;
border-radius: 4px;
display: inline-block;
position: relative;
background: white;
color: white;
animation: loading 1s 1s linear infinite alternate;
} span::before, span::after {
/* content: ''; */
width: 12px;
height: 64px;
border-radius: 4px;
background: currentColor;
position: absolute;
bottom: 0;
left: 20px;
animation: loadingx 1s 1.5s linear infinite alternate;
} span::after {
left: -20px;
animation-delay: 0s;
} @keyframes loadingx {
0% {
height: 64px;
}
100% {
height: 14px;
}
} @keyframes loading {
0% {
height: 64px;
transform: translateY(0);
}
100% {
height: 14px;
transform: translateY(25px)
}
}

原理详解

步骤1

使用span标签,设置为

  • 相对定位
  • 宽度:12px 高度:64px
  • border-radius: 4px
  • 背景色:白色
  • colore:白色
span {
width: 12px;
height: 64px;
border-radius: 4px;
position: relative;
background: white;
color: white;
}

效果图如下

步骤2

为span添加动画

效果简单描述为:长度由长变短,再变短,依次循环

如果只是简单的设置height属性的变化

  • 初始状态:height=64px
  • 末尾状态:heigth=14px

代码为:

span {
animation: loading 1s linear infinite alternate;
}
@keyframes loading {
0% {
height: 64px;
}
100% {
height: 14px;
}
}

产生的效果如下

这是因为海轰事先将span设置为水平、竖直均位于页面中间的,所以仅长度变化产生的效果图如上

如何实现span一头固定、一头延伸呢?

这里就需要利用translateY属性了,不清楚的可以查查,其实就是二维平面y轴变换

  • 初始状态:height=64px transform: translateY(0)
  • 末尾状态:height=14px transform: translateY(25px)

注: 25px=(64-14)/2 px



代码为:

span {
animation: loading 1s linear infinite alternate;
}
@keyframes loading {
0% {
height: 64px;
transform: translateY(0);
}
100% {
height: 14px;
transform: translateY(25px)
}
}

span动画效果如下

步骤3

在使用span::before和span::after伪元素

设置为

  • 绝对定位( bottom: 0 left: 20px,固定在底部)
  • 宽度为12px 高度为64px
  • 背景色:currentColor(这里其实之间设置白色也行)

span::before, span::after {
content: '';
width: 12px;
height: 64px;
border-radius: 4px;
background: currentColor;
position: absolute;
bottom: 0;
left: 20px;
}

span与span::before位置关系如下

步骤4

分离span::before和span::after

将span::after位置移动至span左边

span::after {
left: -20px;
}

位置关系如下

步骤5

为span::before、span::after添加动画

只涉及长度改变

span::before, span::after {
animation: loadingx 1s linear infinite alternate;
}
@keyframes loadingx {
0% {
height: 64px;
}
100% {
height: 14px;
}
}

span::before和span::after动画如下(span动画不生效时)

为什么这里就不需要使用translateY属性了呢?

海轰的理解:因为span::before、span::after的位置是同span一样的,span已经设置了,那么before和after就不需要设置了

如果再设置translateY

产生的效果图如下

步骤6

同时开启span、span::before、span::after动画

同时分别设置动画开始延时

  • span:延时1s
  • span::before:延时1.5s
  • span::after:延时0s

注:具体数据依据自己喜好设置即可,只需要保障各部分动画开始时有时间间隔就行

最后代码如下:

span {
animation: loading 1s 1s linear infinite alternate;
} span::before, span::after {
animation: loadingx 1s 1.5s linear infinite alternate;
} span::after {
animation-delay: 0s;
}
@keyframes loadingx {
0% {
height: 64px;
}
100% {
height: 14px;
}
} @keyframes loading {
0% {
height: 64px;
transform: translateY(0);
}
100% {
height: 14px;
transform: translateY(25px)
}
}

得到最终效果:

结语

文章仅作为学习笔记,记录从0到1的一个过程

希望对您有所帮助,如有错误欢迎小伙伴指正~

我是海轰ଘ(੭ˊᵕˋ)੭,如果您觉得写得可以的话,请点个赞吧

谢谢支持️

【动画消消乐】HTML+CSS 自定义加载动画 065的更多相关文章

  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 自定义加载动画:怦然心跳 066

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

  5. 【动画消消乐】HTML+CSS 自定义加载动画 062

    效果展示 Demo代码 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  6. html自定义加载动画

    整体代码 HTML 实现自定义加载动画,话不多说如下代码所示: <!DOCTYPE html> <html lang="en"> <head> ...

  7. CSS 实现加载动画之八-圆点旋转

    这篇文件介绍的动画是QQ邮箱APP里的加载动画,效果类似,但是不完全一样.实现过程不复杂,这里不详细解释了,直接上源码.另外还有一种实现方式,利用元素的3D转换加平移. 1. 先看截图 2. 源代码 ...

  8. CSS 实现加载动画之二-圆环旋转

    上次简单的介绍了下如何用代码实现菊花旋转的加载动画,动画点击,这次继续我们的动画系列,实现另外一种加载动画,圆环旋转.与上次不同的是,菊花旋转是通过改变元素透明度来实现动画,这次因为考虑到元素叠加,加 ...

  9. CSS 实现加载动画之七-彩环旋转

    今天整理的这个动画估计大家都不会陌生,彩环旋转,看过之后是不是觉得很熟悉,对,这个就是优酷视频APP里面的加载动画.本人空余时间喜欢看些视频,留意到这个动画后就想用代码实现出来,今天整理了下,跟大家分 ...

随机推荐

  1. 使用TENSORRT和NVIDIA-DOCKER部署深部神经网络

    使用TENSORRT和NVIDIA-DOCKER部署深部神经网络 当前部署工作流

  2. Redis6.x学习笔记(五)哨兵

    前言 最近学习Redis6.x,特做笔记以备忘,与大家共学.课程是从私塾在线下载的,他们把架构师课程都放出来了,大家可以去下载学习,不要钱的,地址是http://t.hk.uy/eK7,课程很不错,值 ...

  3. Redis的过期键删除策略

    文章首发于公众号:蘑菇睡不着,欢迎来看看 前言 Redis 中都是键值对的存储形式,键都是字符串类型的,而值有很多种类型,如 string.list.hash.set.sorted set等类型.当设 ...

  4. docker基本底层原理

    docker是怎么工作的 Docker是一个Client-Server结构的系统,Docker的守护进程运行在主机上,通过Socket客户端进行访问 DockerServer接收到DockerClie ...

  5. 「10.19」最长不下降子序列(DP)·完全背包问题(spfa优化DP)·最近公共祖先(线段树+DFS序)

    我又被虐了... A. 最长不下降子序列 考场打的错解,成功调了两个半小时还是没A, 事实上和正解的思路很近了,只是没有想到直接将前$D$个及后$D$个直接提出来 确实当时思路有些紊乱,打的时候只是将 ...

  6. ANDROID开发之OOM:一张图片(BitMap)占用内存的计算 图片内存优化

    Android中一张图片(BitMap)占用的内存主要和以下几个因数有关:图片长度,图片宽度,单位像素占用的字节数. 一张图片(BitMap)占用的内存=图片长度*图片宽度*单位像素占用的字节数 注: ...

  7. 关于LCA的几点想法

    倍增 这是最最最常见的写法了,一个fa[N][logN]的数组直接搞定 时间复杂度也不算太高 预处理 $ O(nlogn) $ 如果你想卡的话,可以卡到 $ O(nlogh) $ h为树的深度 查询 ...

  8. 基于 CentOS 8 搭建 openLDAP 服务器

    转载请注明原文地址:基于 CentOS 8 搭建 openLDAP 服务器 环境 OS: CentOS 8.4.2105 PHP: 7.4.21 注意 CentOS 7 中可能默认提供了 openLD ...

  9. 10、nginx+uwsgi+django部署(动静分离)

    10.1.说明: 1.介绍: 创建Django项目,可以通过 pyhon3 manage.py runserver 0.0.0.0:8080 & 命令更方便地调试程序,但是如果当一个项目完成了 ...

  10. 第1章:Kubernetes 系统基础

    51.1.kubernetes介绍: 1.什么是kubernetes: (1)Kubernetes是容器集群管理系统,是一个开源的平台,可以实现容器集群的自动化部署.自动扩缩容.维护等功能. (2)使 ...