前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >「HTML+CSS」自定义加载动画【050】

「HTML+CSS」自定义加载动画【050】

作者头像
海轰Pro
发布于 2021-06-17 20:34:46
3870
发布于 2021-06-17 20:34:46
举报
文章被收录于专栏：海轰轰的学习笔记

前言

Hello！小伙伴！ 首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ 哈哈 自我介绍一下 昵称：海轰 标签：程序猿一只｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～） 学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！ 日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～

效果展示

Demo代码

HTML

代码语言：javascript
复制
<!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

代码语言：javascript
复制
html, body {
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #263238;
}

section {
  width: 650px;
  height: 300px;
  padding: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 红色边框仅作提示 */
  border: 2px solid red;
}

span {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  /* background-color: rebeccapurple; */
}

span::after {
  content: '';
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: absolute;
  left: 0;
 /* background-color: red; */
  transform: translate(-50%, 100%);
  animation: loading 2s linear infinite;
  top: 0;
}

@keyframes loading {
  0% {
    background: rgba(255, 255, 255, 1);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 0);
  }
  14% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 1), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 0);
  }
  28% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 1), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 0);
  }
  42% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 1), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 0);
  }
  57% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 1), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 0);
  }
  71% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 1), 18px 32px 0 -6px rgba(255, 255, 255, 0);
  }
  85% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 1);
  }
  100% {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 0);
  }
}

原理详解

步骤1

使用span标签，设置

  • 宽度、高度均为80px
  • 背景色：黄色
  • 圆角化
代码语言：javascript
复制
  width: 80px;
  height: 80px;
  background-color: yellow;
  border-radius: 50%;

效果图如下

步骤2

利用span::after,设置

  • 绝对定位（left: 0）
  • 宽度、高度均为32px
  • 背景色：红色
  • 圆角化
代码语言：javascript
复制
  content: '';
  width: 32px;
  height: 32px;
  border-radius: 50% ;
  position: absolute;
  left: 0;

效果图如下

步骤3

移动红色小球位置

代码语言：javascript
复制
/*向左移动自身50% 再右移自身100%的距离*/
transform: translate(-50%, 100%);

效果图如下

步骤4

使用span::after的阴影（box-shadow）充当白色小球

一共需要6个阴影

为6个小球定义位置 ，使之分布至黄色小球的四周

代码语言：javascript
复制
box-shadow: 
	18px -38px 0 -1px rgba(255, 255, 255, 1), 
	56px -38px 0 -2px rgba(255, 255, 255, 1), 
	78px -10px 0 -3px rgba(255, 255, 255, 1), 
	68px 20px 0 -4px rgba(255, 255, 255, 1),
	44px 34px 0 -5px rgba(255, 255, 255, 1), 
	18px 32px 0 -6px rgba(255, 255, 255, 1);

效果图如下

步骤5

为这些小球添加动画

此时修改红色小球背景色为白色

大球四周就拥有7个白色小球（一个span:after 加上6个阴影产生的小球）

我们需要利用animation控制这7个小球的显示与否

每个小球的状态假设只有两种：显示与不显示

使用颜色对应两者状态

  • 显示：rgba(255, 255, 255, 1)
  • 不显示：rgba(255, 255, 255, 0)

每次只显示一个小球，那么7个小球就产生了7帧关键帧

在这里我们使用8帧，最后一帧颜色稍微浅一点（其实7帧也行，看个人喜好）

第一帧

代码语言：javascript
复制
background: rgba(255, 255, 255, 1);/*span:after的颜色*/
  box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 0);

效果图如下

第二帧

代码语言：javascript
复制
  background: rgba(255, 255, 255, 0);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 1), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 0);

效果图如下

第三帧

代码语言：javascript
复制
background: rgba(255, 255, 255, 0);
  box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 1), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 0);

效果图如下

第四帧

代码语言：javascript
复制
  background: rgba(255, 255, 255, 0);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 1), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 0);

效果图如下

第五帧

代码语言：javascript
复制
  background: rgba(255, 255, 255, 0);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 1), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 0);

效果图如下

第六帧

代码语言：javascript
复制
   background: rgba(255, 255, 255, 0);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 1), 18px 32px 0 -6px rgba(255, 255, 255, 0);

效果图如下

第七帧

代码语言：javascript
复制
  background: rgba(255, 255, 255, 0);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 1);

效果图如下

第八帧

代码语言：javascript
复制
background: rgba(255, 255, 255, 0.5);
  box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 0);

效果图如下

步骤6

使用动画均匀过度这8帧

代码语言：javascript
复制
animation: loading 2s linear infinite;
代码语言：javascript
复制
@keyframes loading {
/*第一帧*/
  0% {
    background: rgba(255, 255, 255, 1);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 0);
  }
  /*第二帧*/
  14% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 1), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 0);
  }
   /*第三帧*/
  28% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 1), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 0);
  }
     /*第四帧*/
  42% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 1), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 0);
  }
     /*第五帧*/
  57% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 1), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 0);
  }
     /*第六帧*/
  71% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 1), 18px 32px 0 -6px rgba(255, 255, 255, 0);
  }
     /*第七帧*/
  85% {
    background: rgba(255, 255, 255, 0);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 1);
  }
     /*第八帧*/
  100% {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 18px -38px 0 -1px rgba(255, 255, 255, 0), 56px -38px 0 -2px rgba(255, 255, 255, 0), 78px -10px 0 -3px rgba(255, 255, 255, 0), 68px 20px 0 -4px rgba(255, 255, 255, 0), 44px 34px 0 -5px rgba(255, 255, 255, 0), 18px 32px 0 -6px rgba(255, 255, 255, 0);
  }
}

效果图如下

步骤7

取消span的背景色

代码语言：javascript
复制
/* background-color: yellow; */

最后效果图如下

结语

学习来源：

https://codepen.io/bhadupranjal/pen/vYLZYqQ

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-06-13 ，如有侵权请联系 cloudcommunity@tencent.com 删除
c++
css

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ，欢迎热爱写作的你一起参与！

c++
css
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
目录
  • 前言
  • 效果展示
  • Demo代码
  • 原理详解
    • 步骤1
      • 步骤2
        • 步骤3
          • 步骤4
            • 步骤5
              • 步骤6
                • 步骤7
                • 结语
                领券

                腾讯云开发者

                扫码关注腾讯云开发者

                扫码关注腾讯云开发者

                领取腾讯云代金券

                热门产品

                热门推荐

                更多推荐

                Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

                深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

                腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

                Copyright © 2013 - 2024 Tencent Cloud.

                All Rights Reserved. 腾讯云 版权所有

                登录 后参与评论