前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
返回腾讯云官网
社区首页 >专栏 >纯css实现117个Loading效果（中）

纯css实现117个Loading效果（中）

作者头像
德育处主任
发布于 2022-04-17 02:56:59
发布于 2022-04-17 02:56:59
1.4K026
代码可运行
举报
文章被收录于专栏：前端数据可视化前端数据可视化
运行总次数：26
代码可运行

theme: smartblue

前言

因为特效数量太多，所以我分成上、中、下三篇（每篇39个特效），本文为中篇。

《纯css实现117个Loading效果（上）》

《纯css实现117个Loading效果（中）》

《纯css实现117个Loading效果（下）》

这是我这几十年间从世界各地寻觅到的 Loading特效，合计117个（本文贴出第40-78个），而且是 纯CSS 制作的。

本文不讲解原理（以后可能会开新篇讲），只贴代码，大家来感受一下复制粘贴的快感吧。

❤️❤️喜欢的给本文点个赞呗~

在线展示

仓库代码 Star一下吧

40

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 26px;
  height: 26px;
}

.loading > div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  margin-left: -6px;
  border-radius: 100%;
  animation: ball-square-clockwise-spin 1s infinite ease-in-out;
}

.loading > div:nth-child(1) {
  top: 0;
  left: 0;
  animation-delay: -0.875s;
}

.loading > div:nth-child(2) {
  top: 0;
  left: 50%;
  animation-delay: -0.75s;
}

.loading > div:nth-child(3) {
  top: 0;
  left: 100%;
  animation-delay: -0.625s;
}

.loading > div:nth-child(4) {
  top: 50%;
  left: 100%;
  animation-delay: -0.5s;
}

.loading > div:nth-child(5) {
  top: 100%;
  left: 100%;
  animation-delay: -0.375s;
}

.loading > div:nth-child(6) {
  top: 100%;
  left: 50%;
  animation-delay: -0.25s;
}

.loading > div:nth-child(7) {
  top: 100%;
  left: 0;
  animation-delay: -0.125s;
}

.loading > div:nth-child(8) {
  top: 50%;
  left: 0;
  animation-delay: 0s;
}

.loading.la-sm {
  width: 12px;
  height: 12px;
}

.loading.la-sm > div {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  margin-left: -3px;
}

.loading.la-2x {
  width: 52px;
  height: 52px;
}

.loading.la-2x > div {
  width: 24px;
  height: 24px;
  margin-top: -12px;
  margin-left: -12px;
}

.loading.la-3x {
  width: 78px;
  height: 78px;
}

.loading.la-3x > div {
  width: 36px;
  height: 36px;
  margin-top: -18px;
  margin-left: -18px;
}

@keyframes ball-square-clockwise-spin {
  0%,
  40%,
  100% {
    transform: scale(0.4);
  }

  70% {
    transform: scale(1);
  }
}
</style>

41

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 26px;
  height: 26px;
}

.loading > div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  margin-left: -6px;
  border-radius: 100%;
  animation: ball-square-spin 1s infinite ease-in-out;
}

.loading > div:nth-child(1) {
  top: 0;
  left: 0;
  animation-delay: -1.125s;
}

.loading > div:nth-child(2) {
  top: 0;
  left: 50%;
  animation-delay: -1.25s;
}

.loading > div:nth-child(3) {
  top: 0;
  left: 100%;
  animation-delay: -1.375s;
}

.loading > div:nth-child(4) {
  top: 50%;
  left: 100%;
  animation-delay: -1.5s;
}

.loading > div:nth-child(5) {
  top: 100%;
  left: 100%;
  animation-delay: -1.625s;
}

.loading > div:nth-child(6) {
  top: 100%;
  left: 50%;
  animation-delay: -1.75s;
}

.loading > div:nth-child(7) {
  top: 100%;
  left: 0;
  animation-delay: -1.875s;
}

.loading > div:nth-child(8) {
  top: 50%;
  left: 0;
  animation-delay: -2s;
}

.loading.la-sm {
  width: 12px;
  height: 12px;
}

.loading.la-sm > div {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  margin-left: -3px;
}

.loading.la-2x {
  width: 52px;
  height: 52px;
}

.loading.la-2x > div {
  width: 24px;
  height: 24px;
  margin-top: -12px;
  margin-left: -12px;
}

.loading.la-3x {
  width: 78px;
  height: 78px;
}

.loading.la-3x > div {
  width: 36px;
  height: 36px;
  margin-top: -18px;
  margin-left: -18px;
}

@keyframes ball-square-spin {
  0%,
  40%,
  100% {
    transform: scale(0.4);
  }

  70% {
    transform: scale(1);
  }
}
</style>

42

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 32px;
  height: 32px;
}

.loading > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 100%;
}

.loading > div:nth-child(1) {
  animation: ball-triangle-path-ball-one 2s 0s ease-in-out infinite;
}

.loading > div:nth-child(2) {
  animation: ball-triangle-path-ball-two 2s 0s ease-in-out infinite;
}

.loading > div:nth-child(3) {
  animation: ball-triangle-path-ball-tree 2s 0s ease-in-out infinite;
}

.loading.la-sm {
  width: 16px;
  height: 16px;
}

.loading.la-sm > div {
  width: 4px;
  height: 4px;
}

.loading.la-2x {
  width: 64px;
  height: 64px;
}

.loading.la-2x > div {
  width: 20px;
  height: 20px;
}

.loading.la-3x {
  width: 96px;
  height: 96px;
}

.loading.la-3x > div {
  width: 30px;
  height: 30px;
}

@keyframes ball-triangle-path-ball-one {
  0% {
    transform: translate(0, 220%);
  }

  17% {
    opacity: 0.25;
  }

  33% {
    opacity: 1;
    transform: translate(110%, 0);
  }

  50% {
    opacity: 0.25;
  }

  66% {
    opacity: 1;
    transform: translate(220%, 220%);
  }

  83% {
    opacity: 0.25;
  }

  100% {
    opacity: 1;
    transform: translate(0, 220%);
  }
}

@keyframes ball-triangle-path-ball-two {
  0% {
    transform: translate(110%, 0);
  }

  17% {
    opacity: 0.25;
  }

  33% {
    opacity: 1;
    transform: translate(220%, 220%);
  }

  50% {
    opacity: 0.25;
  }

  66% {
    opacity: 1;
    transform: translate(0, 220%);
  }

  83% {
    opacity: 0.25;
  }

  100% {
    opacity: 1;
    transform: translate(110%, 0);
  }
}

@keyframes ball-triangle-path-ball-tree {
  0% {
    transform: translate(220%, 220%);
  }

  17% {
    opacity: 0.25;
  }

  33% {
    opacity: 1;
    transform: translate(0, 220%);
  }

  50% {
    opacity: 0.25;
  }

  66% {
    opacity: 1;
    transform: translate(110%, 0);
  }

  83% {
    opacity: 0.25;
  }

  100% {
    opacity: 1;
    transform: translate(220%, 220%);
  }
}
</style>

43

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  position: relative;
  width: 32px;
  height: 32px;
}

.loading > div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  margin-left: -5px;
  border-radius: 100%;
}

.loading > div:first-child {
  animation: ball-zig-effect 0.7s 0s infinite linear;
}

.loading > div:last-child {
  animation: ball-zag-effect 0.7s 0s infinite linear;
}

.loading.la-sm {
  width: 16px;
  height: 16px;
}

.loading.la-sm > div {
  width: 4px;
  height: 4px;
  margin-top: -2px;
  margin-left: -2px;
}

.loading.la-2x {
  width: 64px;
  height: 64px;
}

.loading.la-2x > div {
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
}

.loading.la-3x {
  width: 96px;
  height: 96px;
}

.loading.la-3x > div {
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
}

@keyframes ball-zig-effect {
  0% {
    transform: translate(0, 0);
  }

  33% {
    transform: translate(-75%, -150%);
  }

  66% {
    transform: translate(75%, -150%);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes ball-zag-effect {
  0% {
    transform: translate(0, 0);
  }

  33% {
    transform: translate(75%, 150%);
  }

  66% {
    transform: translate(-75%, 150%);
  }

  100% {
    transform: translate(0, 0);
  }
}
</style>

44

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  position: relative;
  width: 32px;
  height: 32px;
}

.loading > div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  margin-left: -5px;
  border-radius: 100%;
}

.loading > div:first-child {
  animation: ball-zig-deflect 1.5s 0s infinite linear;
}

.loading > div:last-child {
  animation: ball-zag-deflect 1.5s 0s infinite linear;
}

.loading.la-sm {
  width: 16px;
  height: 16px;
}

.loading.la-sm > div {
  width: 4px;
  height: 4px;
  margin-top: -2px;
  margin-left: -2px;
}

.loading.la-2x {
  width: 64px;
  height: 64px;
}

.loading.la-2x > div {
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
}

.loading.la-3x {
  width: 96px;
  height: 96px;
}

.loading.la-3x > div {
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
}

@keyframes ball-zig-deflect {
  17% {
    transform: translate(-80%, -160%);
  }
  34% {
    transform: translate(80%, -160%);
  }
  50% {
    transform: translate(0, 0);
  }
  67% {
    transform: translate(80%, -160%);
  }
  84% {
    transform: translate(-80%, -160%);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes ball-zag-deflect {
  17% {
    transform: translate(80%, 160%);
  }
  34% {
    transform: translate(-80%, 160%);
  }
  50% {
    transform: translate(0, 0);
  }
  67% {
    transform: translate(-80%, 160%);
  }
  84% {
    transform: translate(80%, 160%);
  }
  100% {
    transform: translate(0, 0);
  }
}
</style>

45

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 32px;
  height: 32px;
}

.loading > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  margin-left: -7px;
  border-radius: 0;
  animation: cube-transition 1.6s 0s infinite ease-in-out;
}

.loading > div:last-child {
  animation-delay: -0.8s;
}

.loading.la-sm {
  width: 16px;
  height: 16px;
}

.loading.la-sm > div {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  margin-left: -3px;
}

.loading.la-2x {
  width: 64px;
  height: 64px;
}

.loading.la-2x > div {
  width: 28px;
  height: 28px;
  margin-top: -14px;
  margin-left: -14px;
}

.loading.la-3x {
  width: 96px;
  height: 96px;
}

.loading.la-3x > div {
  width: 42px;
  height: 42px;
  margin-top: -21px;
  margin-left: -21px;
}

@keyframes cube-transition {
  25% {
    top: 0;
    left: 100%;
    transform: scale(0.5) rotate(-90deg);
  }

  50% {
    top: 100%;
    left: 100%;
    transform: scale(1) rotate(-180deg);
  }

  75% {
    top: 100%;
    left: 0;
    transform: scale(0.5) rotate(-270deg);
  }

  100% {
    top: 0;
    left: 0;
    transform: scale(1) rotate(-360deg);
  }
}
</style>

46

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 32px;
  height: 32px;
}

.loading > div {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 0;
  border-radius: 2px;
  transform: translateY(0) translateX(-50%) rotate(45deg) scale(0);
  animation: fire-diamonds 1.5s infinite linear;
}

.loading > div:nth-child(1) {
  animation-delay: -0.85s;
}

.loading > div:nth-child(2) {
  animation-delay: -1.85s;
}

.loading > div:nth-child(3) {
  animation-delay: -2.85s;
}

.loading.la-sm {
  width: 16px;
  height: 16px;
}

.loading.la-sm > div {
  width: 6px;
  height: 6px;
}

.loading.la-2x {
  width: 64px;
  height: 64px;
}

.loading.la-2x > div {
  width: 24px;
  height: 24px;
}

.loading.la-3x {
  width: 96px;
  height: 96px;
}

.loading.la-3x > div {
  width: 36px;
  height: 36px;
}

@keyframes fire-diamonds {
  0% {
    transform: translateY(75%) translateX(-50%) rotate(45deg) scale(0);
  }

  50% {
    transform: translateY(-87.5%) translateX(-50%) rotate(45deg) scale(1);
  }

  100% {
    transform: translateY(-212.5%) translateX(-50%) rotate(45deg) scale(0);
  }
}
</style>

47

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 40px;
  height: 32px;
}

.loading > div {
  width: 4px;
  height: 32px;
  margin: 2px;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0;
  animation: line-scale 1.2s infinite ease;
}

.loading > div:nth-child(1) {
  animation-delay: -1.2s;
}

.loading > div:nth-child(2) {
  animation-delay: -1.1s;
}

.loading > div:nth-child(3) {
  animation-delay: -1s;
}

.loading > div:nth-child(4) {
  animation-delay: -0.9s;
}

.loading > div:nth-child(5) {
  animation-delay: -0.8s;
}

.loading.la-sm {
  width: 20px;
  height: 16px;
}

.loading.la-sm > div {
  width: 2px;
  height: 16px;
  margin: 1px;
  margin-top: 0;
  margin-bottom: 0;
}

.loading.la-2x {
  width: 80px;
  height: 64px;
}

.loading.la-2x > div {
  width: 8px;
  height: 64px;
  margin: 4px;
  margin-top: 0;
  margin-bottom: 0;
}

.loading.la-3x {
  width: 120px;
  height: 96px;
}

.loading.la-3x > div {
  width: 12px;
  height: 96px;
  margin: 6px;
  margin-top: 0;
  margin-bottom: 0;
}

@keyframes line-scale {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
  }

  20% {
    transform: scaleY(1);
  }
}
</style>

48

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 40px;
  height: 32px;
}

.loading > div {
  width: 4px;
  height: 32px;
  margin: 2px;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0;
  animation-name: line-scale-party;
  animation-iteration-count: infinite;
}

.loading > div:nth-child(1) {
  animation-duration: 0.43s;
  animation-delay: -0.23s;
}

.loading > div:nth-child(2) {
  animation-duration: 0.62s;
  animation-delay: -0.32s;
}

.loading > div:nth-child(3) {
  animation-duration: 0.43s;
  animation-delay: -0.44s;
}

.loading > div:nth-child(4) {
  animation-duration: 0.8s;
  animation-delay: -0.31s;
}

.loading > div:nth-child(5) {
  animation-duration: 0.74s;
  animation-delay: -0.24s;
}

.loading.la-sm {
  width: 20px;
  height: 16px;
}

.loading.la-sm > div {
  width: 2px;
  height: 16px;
  margin: 1px;
  margin-top: 0;
  margin-bottom: 0;
}

.loading.la-2x {
  width: 80px;
  height: 64px;
}

.loading.la-2x > div {
  width: 8px;
  height: 64px;
  margin: 4px;
  margin-top: 0;
  margin-bottom: 0;
}

.loading.la-3x {
  width: 120px;
  height: 96px;
}

.loading.la-3x > div {
  width: 12px;
  height: 96px;
  margin: 6px;
  margin-top: 0;
  margin-bottom: 0;
}

@keyframes line-scale-party {
  0% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(0.3);
  }

  100% {
    transform: scaleY(1);
  }
}
</style>

49

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 40px;
  height: 32px;
}

.loading > div {
  width: 4px;
  height: 32px;
  margin: 2px;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0;
  animation: line-scale-pulse-out 0.9s infinite
    cubic-bezier(0.85, 0.25, 0.37, 0.85);
}

.loading > div:nth-child(3) {
  animation-delay: -0.9s;
}

.loading > div:nth-child(2),
.loading > div:nth-child(4) {
  animation-delay: -0.7s;
}

.loading > div:nth-child(1),
.loading > div:nth-child(5) {
  animation-delay: -0.5s;
}

.loading.la-sm {
  width: 20px;
  height: 16px;
}

.loading.la-sm > div {
  width: 2px;
  height: 16px;
  margin: 1px;
  margin-top: 0;
  margin-bottom: 0;
}

.loading.la-2x {
  width: 80px;
  height: 64px;
}

.loading.la-2x > div {
  width: 8px;
  height: 64px;
  margin: 4px;
  margin-top: 0;
  margin-bottom: 0;
}

.loading.la-3x {
  width: 120px;
  height: 96px;
}

.loading.la-3x > div {
  width: 12px;
  height: 96px;
  margin: 6px;
  margin-top: 0;
  margin-bottom: 0;
}

@keyframes line-scale-pulse-out {
  0% {
    transform: scaley(1);
  }

  50% {
    transform: scaley(0.3);
  }

  100% {
    transform: scaley(1);
  }
}
</style>

50

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 40px;
  height: 32px;
}

.loading > div {
  width: 4px;
  height: 32px;
  margin: 2px;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0;
  animation: line-scale-pulse-out-rapid 0.9s infinite
    cubic-bezier(0.11, 0.49, 0.38, 0.78);
}

.loading > div:nth-child(3) {
  animation-delay: -0.9s;
}

.loading > div:nth-child(2),
.loading > div:nth-child(4) {
  animation-delay: -0.65s;
}

.loading > div:nth-child(1),
.loading > div:nth-child(5) {
  animation-delay: -0.4s;
}

.loading.la-sm {
  width: 20px;
  height: 16px;
}

.loading.la-sm > div {
  width: 2px;
  height: 16px;
  margin: 1px;
  margin-top: 0;
  margin-bottom: 0;
}

.loading.la-2x {
  width: 80px;
  height: 64px;
}

.loading.la-2x > div {
  width: 8px;
  height: 64px;
  margin: 4px;
  margin-top: 0;
  margin-bottom: 0;
}

.loading.la-3x {
  width: 120px;
  height: 96px;
}

.loading.la-3x > div {
  width: 12px;
  height: 96px;
  margin: 6px;
  margin-top: 0;
  margin-bottom: 0;
}

@keyframes line-scale-pulse-out-rapid {
  0% {
    transform: scaley(1);
  }

  80% {
    transform: scaley(0.3);
  }

  90% {
    transform: scaley(1);
  }
}
</style>

51

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 32px;
  height: 32px;
}

.loading > div {
  position: absolute;
  width: 2px;
  height: 10px;
  margin: 2px;
  margin-top: -5px;
  margin-left: -1px;
  border-radius: 0;
  animation: line-spin-clockwise-fade 1s infinite ease-in-out;
}

.loading > div:nth-child(1) {
  top: 15%;
  left: 50%;
  transform: rotate(0deg);
  animation-delay: -0.875s;
}

.loading > div:nth-child(2) {
  top: 25.2512626585%;
  left: 74.7487373415%;
  transform: rotate(45deg);
  animation-delay: -0.75s;
}

.loading > div:nth-child(3) {
  top: 50%;
  left: 85%;
  transform: rotate(90deg);
  animation-delay: -0.625s;
}

.loading > div:nth-child(4) {
  top: 74.7487373415%;
  left: 74.7487373415%;
  transform: rotate(135deg);
  animation-delay: -0.5s;
}

.loading > div:nth-child(5) {
  top: 84.9999999974%;
  left: 50.0000000004%;
  transform: rotate(180deg);
  animation-delay: -0.375s;
}

.loading > div:nth-child(6) {
  top: 74.7487369862%;
  left: 25.2512627193%;
  transform: rotate(225deg);
  animation-delay: -0.25s;
}

.loading > div:nth-child(7) {
  top: 49.9999806189%;
  left: 15.0000039834%;
  transform: rotate(270deg);
  animation-delay: -0.125s;
}

.loading > div:nth-child(8) {
  top: 25.2506949798%;
  left: 25.2513989292%;
  transform: rotate(315deg);
  animation-delay: 0s;
}

.loading.la-sm {
  width: 16px;
  height: 16px;
}

.loading.la-sm > div {
  width: 1px;
  height: 4px;
  margin-top: -2px;
  margin-left: 0;
}

.loading.la-2x {
  width: 64px;
  height: 64px;
}

.loading.la-2x > div {
  width: 4px;
  height: 20px;
  margin-top: -10px;
  margin-left: -2px;
}

.loading.la-3x {
  width: 96px;
  height: 96px;
}

.loading.la-3x > div {
  width: 6px;
  height: 30px;
  margin-top: -15px;
  margin-left: -3px;
}

@keyframes line-spin-clockwise-fade {
  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}
</style>

52

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 32px;
  height: 32px;
  animation: line-spin-clockwise-fade-rotating-rotate 6s infinite linear;
}

.loading > div {
  position: absolute;
  width: 2px;
  height: 10px;
  margin: 2px;
  margin-top: -5px;
  margin-left: -1px;
  border-radius: 0;
  animation: line-spin-clockwise-fade-rotating 1s infinite ease-in-out;
}

.loading > div:nth-child(1) {
  top: 15%;
  left: 50%;
  transform: rotate(0deg);
  animation-delay: -0.875s;
}

.loading > div:nth-child(2) {
  top: 25.2512626585%;
  left: 74.7487373415%;
  transform: rotate(45deg);
  animation-delay: -0.75s;
}

.loading > div:nth-child(3) {
  top: 50%;
  left: 85%;
  transform: rotate(90deg);
  animation-delay: -0.625s;
}

.loading > div:nth-child(4) {
  top: 74.7487373415%;
  left: 74.7487373415%;
  transform: rotate(135deg);
  animation-delay: -0.5s;
}

.loading > div:nth-child(5) {
  top: 84.9999999974%;
  left: 50.0000000004%;
  transform: rotate(180deg);
  animation-delay: -0.375s;
}

.loading > div:nth-child(6) {
  top: 74.7487369862%;
  left: 25.2512627193%;
  transform: rotate(225deg);
  animation-delay: -0.25s;
}

.loading > div:nth-child(7) {
  top: 49.9999806189%;
  left: 15.0000039834%;
  transform: rotate(270deg);
  animation-delay: -0.125s;
}

.loading > div:nth-child(8) {
  top: 25.2506949798%;
  left: 25.2513989292%;
  transform: rotate(315deg);
  animation-delay: 0s;
}

.loading.la-sm {
  width: 16px;
  height: 16px;
}

.loading.la-sm > div {
  width: 1px;
  height: 4px;
  margin-top: -2px;
  margin-left: 0;
}

.loading.la-2x {
  width: 64px;
  height: 64px;
}

.loading.la-2x > div {
  width: 4px;
  height: 20px;
  margin-top: -10px;
  margin-left: -2px;
}

.loading.la-3x {
  width: 96px;
  height: 96px;
}

.loading.la-3x > div {
  width: 6px;
  height: 30px;
  margin-top: -15px;
  margin-left: -3px;
}

@keyframes line-spin-clockwise-fade-rotating-rotate {
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes line-spin-clockwise-fade-rotating {
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
</style>

53

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 32px;
  height: 32px;
}

.loading > div:nth-child(1),
.loading > div:nth-child(2) {
  width: 0;
  height: 0;
  background: transparent;
  border-style: solid;
  border-width: 16px;
  border-right-color: transparent;
  border-radius: 100%;
  animation: pacman-rotate-half-up 0.5s 0s infinite;
}

.loading > div:nth-child(2) {
  margin-top: -32px;
  animation-name: pacman-rotate-half-down;
}

.loading > div:nth-child(3),
.loading > div:nth-child(4),
.loading > div:nth-child(5),
.loading > div:nth-child(6) {
  position: absolute;
  top: 50%;
  left: 200%;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  opacity: 0;
  animation: pacman-balls 2s 0s infinite linear;
}

.loading > div:nth-child(3) {
  animation-delay: -1.44s;
}

.loading > div:nth-child(4) {
  animation-delay: -1.94s;
}

.loading > div:nth-child(5) {
  animation-delay: -2.44s;
}

.loading > div:nth-child(6) {
  animation-delay: -2.94s;
}

.loading.la-sm {
  width: 16px;
  height: 16px;
}

.loading.la-sm > div:nth-child(1),
.loading.la-sm > div:nth-child(2) {
  border-width: 8px;
}

.loading.la-sm > div:nth-child(2) {
  margin-top: -16px;
}

.loading.la-sm > div:nth-child(3),
.loading.la-sm > div:nth-child(4),
.loading.la-sm > div:nth-child(5),
.loading.la-sm > div:nth-child(6) {
  width: 4px;
  height: 4px;
}

.loading.la-2x {
  width: 64px;
  height: 64px;
}

.loading.la-2x > div:nth-child(1),
.loading.la-2x > div:nth-child(2) {
  border-width: 32px;
}

.loading.la-2x > div:nth-child(2) {
  margin-top: -64px;
}

.loading.la-2x > div:nth-child(3),
.loading.la-2x > div:nth-child(4),
.loading.la-2x > div:nth-child(5),
.loading.la-2x > div:nth-child(6) {
  width: 16px;
  height: 16px;
}

.loading.la-3x {
  width: 96px;
  height: 96px;
}

.loading.la-3x > div:nth-child(1),
.loading.la-3x > div:nth-child(2) {
  border-width: 48px;
}

.loading.la-3x > div:nth-child(2) {
  margin-top: -96px;
}

.loading.la-3x > div:nth-child(3),
.loading.la-3x > div:nth-child(4),
.loading.la-3x > div:nth-child(5),
.loading.la-3x > div:nth-child(6) {
  width: 24px;
  height: 24px;
}

@keyframes pacman-rotate-half-up {
  0%,
  100% {
    transform: rotate(270deg);
  }

  50% {
    transform: rotate(360deg);
  }
}

@keyframes pacman-rotate-half-down {
  0%,
  100% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(0deg);
  }
}

@keyframes pacman-balls {
  0% {
    left: 200%;
    opacity: 0;
    transform: translateY(-50%);
  }

  5% {
    opacity: 0.5;
  }

  66% {
    opacity: 1;
  }

  67% {
    opacity: 0;
  }

  100% {
    left: 0;
    transform: translateY(-50%);
  }
}
</style>

54

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 32px;
  height: 32px;
}

.loading > div:nth-child(1),
.loading > div:nth-child(2) {
  position: absolute;
  left: 0;
  width: 100%;
}

.loading > div:nth-child(1) {
  top: -25%;
  z-index: 1;
  height: 100%;
  border-radius: 10%;
  animation: square-jelly-box-animate 0.6s -0.1s linear infinite;
}

.loading > div:nth-child(2) {
  bottom: -9%;
  height: 10%;
  background: #000;
  border-radius: 50%;
  opacity: 0.2;
  animation: square-jelly-box-shadow 0.6s -0.1s linear infinite;
}

.loading.la-sm {
  width: 16px;
  height: 16px;
}

.loading.la-2x {
  width: 64px;
  height: 64px;
}

.loading.la-3x {
  width: 96px;
  height: 96px;
}

@keyframes square-jelly-box-animate {
  17% {
    border-bottom-right-radius: 10%;
  }

  25% {
    transform: translateY(25%) rotate(22.5deg);
  }

  50% {
    border-bottom-right-radius: 100%;
    transform: translateY(50%) scale(1, 0.9) rotate(45deg);
  }

  75% {
    transform: translateY(25%) rotate(67.5deg);
  }

  100% {
    transform: translateY(0) rotate(90deg);
  }
}

@keyframes square-jelly-box-shadow {
  50% {
    transform: scale(1.25, 1);
  }
}
</style>

55

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 32px;
  height: 32px;
}

.loading > div {
  width: 100%;
  height: 100%;
  background: transparent;
  border-width: 2px;
  border-radius: 0;
  animation: square-loader 2s infinite ease;
}

.loading > div:after {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  content: "";
  background-color: currentColor;
  animation: square-loader-inner 2s infinite ease-in;
}

.loading.la-sm {
  width: 16px;
  height: 16px;
}

.loading.la-sm > div {
  border-width: 1px;
}

.loading.la-2x {
  width: 64px;
  height: 64px;
}

.loading.la-2x > div {
  border-width: 4px;
}

.loading.la-3x {
  width: 96px;
  height: 96px;
}

.loading.la-3x > div {
  border-width: 6px;
}

@keyframes square-loader {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(180deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes square-loader-inner {
  0% {
    height: 0;
  }

  25% {
    height: 0;
  }

  50% {
    height: 100%;
  }

  75% {
    height: 100%;
  }

  100% {
    height: 0;
  }
}
</style>

56

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 32px;
  height: 32px;
}

.loading > div {
  width: 100%;
  height: 100%;
  border-radius: 0;
  animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}

.loading.la-sm {
  width: 16px;
  height: 16px;
}

.loading.la-2x {
  width: 64px;
  height: 64px;
}

.loading.la-3x {
  width: 96px;
  height: 96px;
}

@keyframes square-spin {
  0% {
    transform: perspective(100px) rotateX(0) rotateY(0);
  }

  25% {
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }

  50% {
    transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }

  75% {
    transform: perspective(100px) rotateX(0) rotateY(180deg);
  }

  100% {
    transform: perspective(100px) rotateX(0) rotateY(360deg);
  }
}
</style>

57

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 32px;
  height: 32px;
}

.loading > div {
  width: 32px;
  height: 32px;
  background: transparent;
  border-width: 2px;
  border-radius: 100%;
}

.loading > div:before,
.loading > div:after {
  position: absolute;
  top: 14px;
  left: 14px;
  display: block;
  width: 2px;
  margin-top: -1px;
  margin-left: -1px;
  content: "";
  background: currentColor;
  border-radius: 2px;
  transform-origin: 1px 1px 0;
  animation: timer-loader 1250ms infinite linear;
  animation-delay: -625ms;
}

.loading > div:before {
  height: 12px;
}

.loading > div:after {
  height: 8px;
  animation-duration: 15s;
  animation-delay: -7.5s;
}

.loading.la-sm {
  width: 16px;
  height: 16px;
}

.loading.la-sm > div {
  width: 16px;
  height: 16px;
  border-width: 1px;
}

.loading.la-sm > div:before,
.loading.la-sm > div:after {
  top: 7px;
  left: 7px;
  width: 1px;
  margin-top: -0.5px;
  margin-left: -0.5px;
  border-radius: 1px;
  transform-origin: 0.5px 0.5px 0;
}

.loading.la-sm > div:before {
  height: 6px;
}

.loading.la-sm > div:after {
  height: 4px;
}

.loading.la-2x {
  width: 64px;
  height: 64px;
}

.loading.la-2x > div {
  width: 64px;
  height: 64px;
  border-width: 4px;
}

.loading.la-2x > div:before,
.loading.la-2x > div:after {
  top: 28px;
  left: 28px;
  width: 4px;
  margin-top: -2px;
  margin-left: -2px;
  border-radius: 4px;
  transform-origin: 2px 2px 0;
}

.loading.la-2x > div:before {
  height: 24px;
}

.loading.la-2x > div:after {
  height: 16px;
}

.loading.la-3x {
  width: 96px;
  height: 96px;
}

.loading.la-3x > div {
  width: 96px;
  height: 96px;
  border-width: 6px;
}

.loading.la-3x > div:before,
.loading.la-3x > div:after {
  top: 42px;
  left: 42px;
  width: 6px;
  margin-top: -3px;
  margin-left: -3px;
  border-radius: 6px;
  transform-origin: 3px 3px 0;
}

.loading.la-3x > div:before {
  height: 36px;
}

.loading.la-3x > div:after {
  height: 24px;
}

@keyframes timer-loader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>

58

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div></div>
</div>

<style>
.loading,
.loading > div {
  position: relative;
  box-sizing: border-box;
}

.loading {
  display: block;
  font-size: 0;
  color: #000;
}

.loading.la-dark {
  color: #333;
}

.loading > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.loading {
  width: 32px;
  height: 16px;
}

.loading > div {
  width: 0;
  height: 0;
  background: transparent;
  border: none;
  border-style: solid;
  border-width: 16px;
  border-top-width: 0;
  border-right-color: transparent;
  border-left-color: transparent;
  animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9)
    infinite;
}

.loading.la-sm {
  width: 16px;
  height: 8px;
}

.loading.la-sm > div {
  border-width: 8px;
  border-top-width: 0;
}

.loading.la-2x {
  width: 64px;
  height: 32px;
}

.loading.la-2x > div {
  border-width: 32px;
  border-top-width: 0;
}

.loading.la-3x {
  width: 96px;
  height: 48px;
}

.loading.la-3x > div {
  border-width: 48px;
  border-top-width: 0;
}

@keyframes triangle-skew-spin {
  0% {
    transform: perspective(100px) rotateX(0) rotateY(0);
  }

  25% {
    transform: perspective(100px) rotateX(180deg) rotateY(0);
  }

  50% {
    transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }

  75% {
    transform: perspective(100px) rotateX(0) rotateY(180deg);
  }

  100% {
    transform: perspective(100px) rotateX(0) rotateY(360deg);
  }
}
</style>

59

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading"></div>

<style>
.loading {
  width: 50px;
  height: 50px;
  display: inline-block;
  padding: 0px;
  opacity: 0.5;
  border: 3px solid #000;
  animation: loading-animation 1s ease-in-out infinite alternate;
}

.loading:before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 3px solid #000;
}

.loading:after {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 3px solid #000;
}

@keyframes loading-animation {
  from {
    transform: rotate(0deg) scale(1, 1);
    border-radius: 0px;
  }

  to {
    transform: rotate(360deg) scale(0, 0);
    border-radius: 50px;
  }
}
</style>

60

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<style>
.loading {
  display: inline-block;
  font-size: 0px;
  padding: 0px;
}

.loading span {
  vertical-align: middle;
  border-radius: 100%;

  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 3px 2px;
  animation: loading-animation 0.8s linear infinite alternate;
}

.loading span:nth-child(1) {
  animation-delay: -1s;
  background: rgba(0, 0, 0, 0.6);
}

.loading span:nth-child(2) {
  animation-delay: -0.8s;
  background: rgba(0, 0, 0, 0.8);
}

.loading span:nth-child(3) {
  animation-delay: -0.26666s;
  background: rgba(0, 0, 0, 1);
}

.loading span:nth-child(4) {
  animation-delay: -0.8s;
  background: rgba(0, 0, 0, 0.8);
}

.loading span:nth-child(5) {
  animation-delay: -1s;
  background: rgba(0, 0, 0, 0.4);
}

@keyframes loading-animation {
  from {
    transform: scale(0, 0);
  }

  to {
    transform: scale(1, 1);
  }
}
</style>

61

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading"></div>

<style>
.loading {
  width: 25px;
  height: 25px;
  display: inline-block;
  padding: 0px;
  border-radius: 100%;
  border: 5px solid;
  border-top-color: rgba(254, 168, 23, 0.65);
  border-bottom-color: rgba(57, 154, 219, 0.65);
  border-left-color: rgba(188, 84, 93, 0.95);
  border-right-color: rgba(137, 188, 79, 0.95);
  animation: loading-animation 2s ease-in-out infinite alternate;
}

@keyframes loading-animation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(720deg);
  }
}
</style>

62

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading"></div>

<style>
.loading {
  width: 45px;
  height: 45px;
  display: inline-block;
  padding: 0px;
  border-radius: 100%;
  border: 5px solid;
  border-top-color: rgba(0, 0, 0, 1);
  border-bottom-color: rgba(0, 0, 0, 0.1);
  border-left-color: rgba(0, 0, 0, 1);
  border-right-color: rgba(0, 0, 0, 0.1);
  animation: loading-animation 1s ease-in-out infinite;
}

@keyframes loading-animation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>

63

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading"></div>

<style>
.loading {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #4183d7;
  border-top: 10px solid #f5ab35;
  animation: loading-animation 1.2s ease-in-out infinite alternate;
}

@keyframes loading-animation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(720deg);
  }
}
</style>

64

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading"></div>

<style>
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 2px solid #000;
  border-top: 2px solid #000;
  animation: loading-animation 1.8s ease-in-out infinite alternate;
}

.loading:before {
  content: " ";
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 0px;
  right: 0px;
  bottom: 5px;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
}

@keyframes loading-animation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(720deg);
  }
}
</style>

65

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading"></div>

<style>
.loading {
  display: inline-block;
  width: 30px;
  height: 4px;
  background: #000;
  animation: loading-animation 1.5s linear infinite;
}

@keyframes loading-animation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(720deg);
  }
}
</style>

66

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading"></div>

<style>
.loading {
  display: inline-block;
  background: rgba(0, 0, 0, 0.6);
  width: 30px;
  height: 30px;
  position: relative;
  text-align: center;
  transform: rotate(20eg);
  animation: loading-animation 3s linear infinite;
}

.loading:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  background: rgba(0, 0, 0, 0.4);
  transform: rotate(135deg);
}

@keyframes loading-animation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(720deg);
  }
}
</style>

67

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div class="shape shape-1"></div>
  <div class="shape shape-2"></div>
  <div class="shape shape-3"></div>
  <div class="shape shape-4"></div>
</div>

<style>
.loading {
  width: 30px;
  height: 30px;
  position: relative;
  transform: rotate(45deg);
}

.shape {
  width: 10px;
  height: 10px;
  position: absolute;
}

.shape-1 {
  background-color: #1875e5;
  left: 0;
  animation: animationShape1 0.5s ease infinite alternate;
}

.shape-2 {
  background-color: #c5523f;
  right: 0;
  animation: animationShape2 0.5s ease infinite alternate;
}

.shape-3 {
  background-color: #499255;
  bottom: 0;
  animation: animationShape3 0.5s ease infinite alternate;
}

.shape-4 {
  background-color: #f2b736;
  right: 0;
  bottom: 0;
  animation: animationShape4 0.5s ease infinite alternate;
}

@keyframes animationShape1 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(16px, 16px);
  }
}

@keyframes animationShape2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-16px, 16px);
  }
}

@keyframes animationShape3 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(16px, -16px);
  }
}

@keyframes animationShape4 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-16px, -16px);
  }
}
</style>

68

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div class="shape shape-1"></div>
  <div class="shape shape-2"></div>
  <div class="shape shape-3"></div>
  <div class="shape shape-4"></div>
</div>

<style>
.loading {
  width: 30px;
  height: 30px;
  position: relative;
  animation: animationContainer 1s ease infinite;
}

.shape {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
}

.shape-1 {
  background-color: #1875e5;
  left: 0;
  animation: animationShape1 0.5s ease infinite alternate;
}

.shape-2 {
  background-color: #c5523f;
  right: 0;
  animation: animationShape2 0.5s ease infinite alternate;
}

.shape-3 {
  background-color: #499255;
  bottom: 0;
  animation: animationShape3 0.5s ease infinite alternate;
}

.shape-4 {
  background-color: #f2b736;
  right: 0;
  bottom: 0;
  animation: animationShape4 0.5s ease infinite alternate;
}

@keyframes animationContainer {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animationShape1 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(20px, 20px);
  }
}

@keyframes animationShape2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-20px, 20px);
  }
}

@keyframes animationShape3 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(20px, -20px);
  }
}

@keyframes animationShape4 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-20px, -20px);
  }
}
</style>

69

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div class="shape shape-1"></div>
  <div class="shape shape-2"></div>
  <div class="shape shape-3"></div>
  <div class="shape shape-4"></div>
</div>

<style lang="scss" scoped>
.loading {
  width: 20px;
  height: 20px;
  position: relative;
  animation: animationContainer 1s ease infinite;
}

.shape {
  width: 10px;
  height: 10px;
  position: absolute;
}

.shape-1 {
  background-color: #1875e5;
  left: 0;
  border-top-left-radius: 100%;
  animation: animationShape1 0.5s ease infinite alternate;
}

.shape-2 {
  background-color: #c5523f;
  right: 0;
  border-top-right-radius: 100%;
  animation: animationShape2 0.5s ease infinite alternate;
}

.shape-3 {
  background-color: #499255;
  bottom: 0;
  border-bottom-left-radius: 100%;
  animation: animationShape3 0.5s ease infinite alternate;
}

.shape-4 {
  background-color: #f2b736;
  right: 0;
  bottom: 0;
  border-bottom-right-radius: 100%;
  animation: animationShape4 0.5s ease infinite alternate;
}

@keyframes animationContainer {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animationShape1 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-3px, -3px);
  }
}

@keyframes animationShape2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(3px, -3px);
  }
}

@keyframes animationShape3 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-3px, 3px);
  }
}

@keyframes animationShape4 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(3px, 3px);
  }
}
</style>

70

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div class="shape shape-1"></div>
  <div class="shape shape-2"></div>
  <div class="shape shape-3"></div>
  <div class="shape shape-4"></div>
</div>

<style>
.loading {
  width: 30px;
  height: 30px;
  position: relative;
  transform: rotate(45deg);
  animation: animationContainer 1s ease infinite;
}

.shape {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
}

.shape-1 {
  background-color: #1875e5;
  left: 0;
  animation: animationShape1 0.3s ease infinite alternate;
}

.shape-2 {
  background-color: #c5523f;
  right: 0;
  animation: animationShape2 0.3s ease infinite 0.3s alternate;
}

.shape-3 {
  background-color: #499255;
  bottom: 0;
  animation: animationShape3 0.3s ease infinite 0.3s alternate;
}

.shape-4 {
  background-color: #f2b736;
  right: 0;
  bottom: 0;
  animation: animationShape4 0.3s ease infinite alternate;
}

@keyframes animationContainer {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animationShape1 {
  0% {
    transform: translate(5px, 5px);
  }

  100% {
    transform: translate(-3px, -3px);
  }
}

@keyframes animationShape2 {
  0% {
    transform: translate(-5px, 5px);
  }

  100% {
    transform: translate(3px, -3px);
  }
}

@keyframes animationShape3 {
  0% {
    transform: translate(5px, -5px);
  }

  100% {
    transform: translate(-3px, 3px);
  }
}

@keyframes animationShape4 {
  0% {
    transform: translate(-5px, -5px);
  }

  100% {
    transform: translate(3px, 3px);
  }
}
</style>

71

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div class="shape shape-1"></div>
  <div class="shape shape-2"></div>
  <div class="shape shape-3"></div>
  <div class="shape shape-4"></div>
</div>

<style>
.loading {
  width: 30px;
  height: 30px;
  position: relative;
  transform: rotate(45deg);
}

.shape {
  width: 15px;
  height: 15px;
  border-radius: 1px;
  position: absolute;
}

.shape-1 {
  background-color: #1875e5;
  left: 0;
  animation: animationShape1 2s ease infinite;
}

.shape-2 {
  background-color: #c5523f;
  right: 0;
  animation: animationShape2 2s ease infinite;
}

.shape-3 {
  background-color: #499255;
  bottom: 0;
  animation: animationShape3 2s ease infinite;
}

.shape-4 {
  background-color: #f2b736;
  right: 0;
  bottom: 0;
  animation: animationShape4 2s ease infinite;
}

@keyframes animationShape1 {
  0% {
    transform: translate(0);
  }

  25% {
    transform: translateX(100%);
  }

  50% {
    transform: translate(100%, 100%);
  }

  75% {
    transform: translate(0, 100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes animationShape2 {
  0% {
    transform: translate(0);
  }

  25% {
    transform: translateY(100%);
  }

  50% {
    transform: translate(-100%, 100%);
  }

  75% {
    transform: translate(-100%, 0);
  }

  100% {
    transform: translate(0);
  }
}

@keyframes animationShape3 {
  0% {
    transform: translate(0);
  }

  25% {
    transform: translateY(-100%);
  }

  50% {
    transform: translate(100%, -100%);
  }

  75% {
    transform: translate(100%, 0);
  }

  100% {
    transform: translate(0);
  }
}

@keyframes animationShape4 {
  0% {
    transform: translate(0);
  }

  25% {
    transform: translateX(-100%);
  }

  50% {
    transform: translate(-100%, -100%);
  }

  75% {
    transform: translate(0, -100%);
  }

  100% {
    transform: translate(0);
  }
}
</style>

72

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div class="shape shape-1"></div>
  <div class="shape shape-2"></div>
  <div class="shape shape-3"></div>
  <div class="shape shape-4"></div>
</div>

<style>
.loading {
  width: 30px;
  height: 30px;
  position: relative;
}

.shape {
  width: 13px;
  height: 13px;
  position: absolute;
  border-radius: 2px;
}

.shape-1 {
  background-color: #1875e5;
  left: 0;
  animation: animationShape1 2s linear infinite;
}

.shape-2 {
  background-color: #c5523f;
  right: 0;
  animation: animationShape2 2s linear infinite;
}

.shape-3 {
  background-color: #499255;
  bottom: 0;
  animation: animationShape3 2s linear infinite;
}

.shape-4 {
  background-color: #f2b736;
  right: 0;
  bottom: 0;
  animation: animationShape4 2s linear infinite;
}

@keyframes animationShape1 {
  0% {
    transform: translate(0);
  }

  25% {
    transform: translateX(17px);
  }

  50% {
    transform: translate(17px, 17px);
  }

  75% {
    transform: translate(0, 17px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes animationShape2 {
  0% {
    transform: translate(0);
  }

  25% {
    transform: translateY(17px);
  }

  50% {
    transform: translate(-17px, 17px);
  }

  75% {
    transform: translate(-17px, 0);
  }

  100% {
    transform: translate(0);
  }
}

@keyframes animationShape3 {
  0% {
    transform: translate(0);
  }

  25% {
    transform: translateY(-17px);
  }

  50% {
    transform: translate(17px, -17px);
  }

  75% {
    transform: translate(17px, 0);
  }

  100% {
    transform: translate(0);
  }
}

@keyframes animationShape4 {
  0% {
    transform: translate(0);
  }

  25% {
    transform: translateX(-17px);
  }

  50% {
    transform: translate(-17px, -17px);
  }

  75% {
    transform: translate(0, -17px);
  }

  100% {
    transform: translate(0);
  }
}
</style>

73

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div class="shape shape-1"></div>
  <div class="shape shape-2"></div>
  <div class="shape shape-3"></div>
  <div class="shape shape-4"></div>
</div>

<style>
.loading {
  width: 30px;
  height: 30px;
  position: relative;
}

.shape {
  width: 10px;
  height: 10px;
  position: absolute;
  border-radius: 50%;
  top: 40%;
}

.shape-1 {
  background-color: #1875e5;
  animation: animationShape1 1s ease infinite;
}

.shape-2 {
  background-color: #c5523f;
  left: 10px;
}

.shape-3 {
  background-color: #499255;
  left: 20px;
}

.shape-4 {
  background-color: #f2b736;
  left: 30px;
  animation: animationShape4 1s ease infinite;
}

@keyframes animationShape1 {
  0% {
    left: -15px;
    top: 5px;
  }

  25% {
    left: 0;
    top: 40%;
  }

  50% {
    left: 0;
    top: 40%;
  }

  75% {
    left: 0;
    top: 40%;
  }

  100% {
    left: -15px;
    top: 5px;
  }
}

@keyframes animationShape4 {
  0% {
    left: 30px;
    top: 40%;
  }

  25% {
    left: 30px;
    top: 40%;
  }

  50% {
    left: 45px;
    top: 5px;
  }

  75% {
    left: 30px;
    top: 40%;
  }

  100% {
    left: 30px;
    top: 40%;
  }
}
</style>

74

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div class="shape shape-1"></div>
  <div class="shape shape-2"></div>
  <div class="shape shape-3"></div>
  <div class="shape shape-4"></div>
</div>

<style>
.loading {
  width: 30px;
  height: 30px;
  position: relative;
}

.shape {
  width: 10px;
  height: 10px;
  position: absolute;
  top: 40%;
  opacity: 0.5;
}

.shape-1 {
  background-color: #1875e5;
  left: -20px;
  animation: animationShape1 1.5s ease infinite;
}

.shape-2 {
  background-color: #c5523f;
  left: 0px;
  animation: animationShape2 1.5s ease infinite 0.5s;
}

.shape-3 {
  background-color: #499255;
  left: 20px;
  animation: animationShape3 1.5s ease infinite 0.8s;
}

.shape-4 {
  background-color: #f2b736;
  left: 40px;
  animation: animationShape4 1.5s ease infinite 1s;
}

@keyframes animationShape1 {
  0% {
    transfrom: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.5);
    opacity: 1;
  }

  100% {
    transfrom: scale(0.5);
    opacity: 0.5;
  }
}

@keyframes animationShape2 {
  0% {
    transfrom: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.5);
    opacity: 1;
  }

  100% {
    transfrom: scale(0.5);
    opacity: 0.5;
  }
}

@keyframes animationShape3 {
  0% {
    transfrom: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.5);
    opacity: 1;
  }

  100% {
    transfrom: scale(0.5);
    opacity: 0.5;
  }
}

@keyframes animationShape4 {
  0% {
    transfrom: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.5);
    opacity: 1;
  }

  100% {
    transfrom: scale(0.5);
    opacity: 0.5;
  }
}
</style>

75

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading">
  <div class="shape shape-4">
    <div class="shape-4-top"></div>
    <div class="shape-4-bottom"></div>
    <div class="shape-4-eye"></div>
  </div>
  <div class="shape shape-1"></div>
  <div class="shape shape-2"></div>
  <div class="shape shape-3"></div>
</div>

<style>
.loading {
  width: 30px;
  height: 30px;
  position: relative;
  display: flex;
  align-items: center;
}

.shape {
  width: 10px;
  height: 10px;
  position: absolute;
  border-radius: 50%;
}

.shape-1 {
  background-color: #1875e5;
  left: -5px;
  animation: animationShape1 7s linear infinite;
}

.shape-2 {
  background-color: #c5523f;
  left: 15px;
  animation: animationShape2 7s linear infinite;
}

.shape-3 {
  background-color: #499255;
  left: 35px;
  animation: animationShape3 7s linear infinite;
}

.shape-4 {
  background-color: #f2b736;
  width: 30px;
  height: 30px;
  left: -40px;
  background-color: transparent !important;
  z-index: 2;
  animation: animationShape4 7s linear infinite;
}

.shape-4 > div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.shape-4 .shape-4-top {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fbbc05;
  clip: rect(0 30px 15px 0);
  transform: rotate(-30deg);
  animation: animationShape4Top 0.4s ease infinite alternate;
}

.shape-4 .shape-4-bottom {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fbbc05;
  clip: rect(15px 30px 30px 0);
  transform: rotate(45deg);
  animation: animationShape4Bottom 0.4s ease infinite alternate;
}

.shape-4 .shape-4-eye {
  width: 5px;
  height: 5px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  position: absolute;
  top: 5px;
  right: 10px;
}

@keyframes animationShape4Top {
  0% {
    transform: rotate(-30deg);
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes animationShape4Bottom {
  0% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes animationShape1 {
  0% {
    opacity: 1;
  }

  17% {
    opacity: 1;
  }

  19% {
    opacity: 0;
  }

  30% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  90% {
    opacity: 0;
  }

  95% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes animationShape2 {
  0% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  22% {
    opacity: 0;
  }

  35% {
    opacity: 0;
  }

  45% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  80% {
    opacity: 0;
  }

  90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes animationShape3 {
  0% {
    opacity: 1;
  }

  27% {
    opacity: 1;
  }

  29% {
    opacity: 0;
  }

  40% {
    opacity: 0;
  }

  64% {
    opacity: 1;
  }

  65% {
    opacity: 1;
  }

  70% {
    opacity: 0;
  }

  80% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes animationShape4 {
  0% {
    left: -40px;
    transform: rotateY(0);
  }

  45% {
    left: 50px;
    transform: rotateY(0);
  }

  50% {
    left: 50px;
    transform: rotateY(180deg);
  }

  95% {
    left: -40px;
    transform: rotateY(180deg);
  }

  100% {
    left: -40px;
    transform: rotateY(0);
  }
}
</style>

76

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 48px;
  border: 3px solid #ddd;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  animation: rotation 1s linear infinite;
}

.loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom-color: #ff3d00;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>

77

​

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 48px;
  border: 3px solid #ddd;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  animation: rotation 1s linear infinite;
}

.loading:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom-color: #ff3d00;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>

78

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<div class="loading"></div>

<style>
.loading {
  width: 48px;
  height: 48px;
  border: 3px solid #ddd;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  animation: rotation 1s linear infinite;
}

.loading:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid;
  border-color: #ff3d00 transparent;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021/12/04 ，如有侵权请联系 cloudcommunity@tencent.com 删除
css

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

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

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

css
评论
登录后参与评论
暂无评论
登录 后参与评论
推荐阅读
纯css实现117个Loading效果（上）
css
这是我这几十年间从世界各地寻觅到的 Loading特效，合计117个（本文贴出第1-39个），而且是 纯CSS 制作的。
德育处主任
2022/04/15
2.8K0
纯css实现117个Loading效果（上）
纯css实现117个Loading效果（下）
css
这是我这几十年间从世界各地寻觅到的 Loading特效，合计117个（本文贴出第79-117个），而且是 纯CSS 制作的。
德育处主任
2022/04/17
1.1K0
纯css实现117个Loading效果（下）
JavaScript+HTML+CSS实现12种常见加载画面
html前端javascriptcss
在现代Web开发中，加载动画不仅可以提升用户体验，还能在后台处理数据时有效地吸引用户注意力。本篇博客将通过原生的JavaScript、HTML和CSS技术，详细介绍12种常见的加载中画面的实现方法。这些动画不仅实用，还可以为我们的Web应用增添一份专业的感觉。
Damon小智
2024/08/19
5620
JavaScript+HTML+CSS实现12种常见加载画面
vue系列自定义加载页
component原理源码
  一个平平无奇的小功能，塞进component文件夹里就可以引用，可以帮你节省10分钟
我不是费圆
2021/12/30
3940
vue系列自定义加载页
CSS3实现10种Loading效果
loading笔记
昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……
大师级码师
2021/09/22
1.4K0
山顶洞人404错误页
backgroundborderclassheightwidth
图片 HTML <!DOCTYPE html> <html lang="cn" > <head> <meta charset="UTF-8"> <title>404 error</title>
Dabenshi
2023/05/26
2850
山顶洞人404错误页
每日分享html特效篇1个侧边栏菜单+2个导航栏+1个登录页面+6个加载
网站
1.前端工程师主要利用HMTL与CSS建构页面（其中html构建骨架，css构建样式），用JavaScript获取后端数据以及完善交互以及用户体验。 2.通俗来讲，前端在一个项目里，拿到UI设计师设计的设计稿，然后实现UI设计师设计稿，调用后端程序员给的数据接口以获取数据，然后测试，最后部署上线。 3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。 4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端程序员晋升机会差距的因素。
淼学派对
2022/11/20
3.5K0
每日分享html特效篇1个侧边栏菜单+2个导航栏+1个登录页面+6个加载
每日分享html特效篇之五个加载页面特效和五个导航按钮特效
网站腾讯云开发者社区html
1.前端工程师主要利用HMTL与CSS建构页面（其中html构建骨架，css构建样式），用JavaScript获取后端数据以及完善交互以及用户体验。 2.通俗来讲，前端在一个项目里，拿到UI设计师设计的设计稿，然后实现UI设计师设计稿，调用后端程序员给的数据接口以获取数据，然后测试，最后部署上线。 3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。 4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端程序员晋升机会差距的因素。
淼学派对
2022/11/20
8.1K0
每日分享html特效篇之五个加载页面特效和五个导航按钮特效
CSS3
css图像处理
box-shadow: h-shadow v-shadow blur spread color inset;
ymktchic
2022/01/18
3530
CSS3
「兔了个兔」CSS如此之美，看我如何实现可爱兔兔LOADING页面（万字详解附源码）
容器css
💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。 ---- 💅文章概要： 各位C站的小伙伴们，你想要获得一款精美的可爱兔兔睡觉Loading页面吗！收藏我并且关注博主，让我们拿起电脑一起练，一路火光带闪电！ ---- 🤟每
THUNDER王
2023/03/08
4490
「兔了个兔」CSS如此之美，看我如何实现可爱兔兔LOADING页面（万字详解附源码）
涨姿势了，有意思的气泡 Loading 效果
容器loading动画函数技巧
没错，这个效果中的核心气泡效果，其实借助 CSS 中的滤镜，能够比较轻松的实现，就是所需的元素可能多点。参考我们之前的：
Sb_Coco
2023/04/21
6300
涨姿势了，有意思的气泡 Loading 效果
深藏在CSS里的诗情画意（十个原创的CSS特效，不容错过）
css
很多的碎碎念都用都用 HTML 跟 CSS 来记录在我的codepen https://codepen.io/krischan77 之上，眼见积累到了一些了，就选出几个来与大家一同分享。
陈大鱼头
2020/04/16
7720
深藏在CSS里的诗情画意（十个原创的CSS特效，不容错过）
HTML静态自动跳转加载
htmlanimationdelayloaderwebkit
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, user-scalable=no"> <meta name="apple-mo
Dabenshi
2023/05/25
1.1K0
css3简易的天气图标动画特效
css
这里绘制云，和《CSS3线性渐变、阴影、缩放实现动画下雨效果》一样的，都是用box-shadow阴影来制作的。
Javanx
2019/09/04
1.6K0
css3简易的天气图标动画特效
加载动画(吃豆豆)
configejslayoutloadingpartial
Loading吃豆豆动画 新建loading.ejs文件 在_partial 文件夹下新建loading.ejs 添加以下代码 <style type="text/css"> #loading-container{ position: fixed; top: 0; left: 0; min-height: 100vh; width: 100vw; z-index: 9999; display: flex; flex-direction:
闲花手札
2021/08/24
6010
css实现动态效果
csshttps网络安全
在线显示地址：https://gethtml.cn/project/2020/03/17/index.html
Dreamy.TZK
2020/04/09
6.6K0
用CSS做一个好看的Loading加载效果
css
最近因为年度人气创作者榜单真是把写文章鸽了好久，觉得天天发朋友圈肯定有人屏蔽我了hhh，所以这不，这个活动结束了，我也来继续码字了，害，生活嘛。
是乃德也是Ned
2022/08/04
9590
用CSS做一个好看的Loading加载效果
CSS 06 动画
css
} css3动画animation符合属性 animation-name: 指定使用哪一个动画
卢衍飞
2023/02/13
6520
用coding向你最爱的人说圣诞快乐
csscanvas编程算法渲染
文章目录 圣诞节的起源 圣诞祝福语 用 coding 说圣诞快乐 Canvas 渲染 圣诞树特效 唯美圣诞树 CSS实现圣诞树 简易的圣诞树 线性树 卡片圣诞树 🎄🎄🎄圣诞节即将到来，今天让我们用编码的方式向你最爱的人表达圣诞节快乐 圣诞节的起源  圣诞节源自古罗马人迎接新年的农神节，与基督教本无关系。在基督教盛行罗马帝国后，教廷将这种民俗节日纳入基督教体系，同时以庆祝耶稣的降生。但在圣诞节这天不是耶稣的生辰，因为《圣经》未记载耶稣具体出生时间，同样没提到过有此种节日，是基督教吸收了古罗马神话的结
鱼找水需要时间
2023/02/16
3910
用coding向你最爱的人说圣诞快乐
纯CSS画卡通蓝天白云草坪动画效果
classtransform动画css容器
<body>元素具有一个从顶部到底部渐变的背景，并且这个渐变背景会在水平方向上循环移动，从而创建一个动态的效果。
肥晨
2024/05/27
2000
纯CSS画卡通蓝天白云草坪动画效果
推荐阅读
编辑精选文章
鹅厂写码13年，我总结的程序员高效阅读方法论进程，线程，协程 - 你了解多少？微服务与分布式系统设计看这篇就够了！
相关讨论
如何实现以下效果？usersig 生成算法纯 python 实现？短视频滤镜如何实现实时预览效果？
相关课程
AI驱动的TDSQL-Cserverless实战营前端数字化IT从业者知识体系
纯css实现117个Loading效果（上）
2.8K0
纯css实现117个Loading效果（下）
1.1K0
JavaScript+HTML+CSS实现12种常见加载画面
5620
vue系列自定义加载页
3940
CSS3实现10种Loading效果
1.4K0
山顶洞人404错误页
2850
每日分享html特效篇1个侧边栏菜单+2个导航栏+1个登录页面+6个加载
3.5K0
每日分享html特效篇之五个加载页面特效和五个导航按钮特效
8.1K0
CSS3
3530
「兔了个兔」CSS如此之美，看我如何实现可爱兔兔LOADING页面（万字详解附源码）
4490
涨姿势了，有意思的气泡 Loading 效果
6300
深藏在CSS里的诗情画意（十个原创的CSS特效，不容错过）
7720
HTML静态自动跳转加载
1.1K0
css3简易的天气图标动画特效
1.6K0
加载动画(吃豆豆)
6010
css实现动态效果
6.6K0
用CSS做一个好看的Loading加载效果
9590
CSS 06 动画
6520
用coding向你最爱的人说圣诞快乐
3910
纯CSS画卡通蓝天白云草坪动画效果
2000
相关推荐
纯css实现117个Loading效果（上）
更多 >
德育处主任0
LV.0
打杂
文章
186
获赞
416
专栏
2
目录
  • theme: smartblue
  • 前言
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
加入讨论
的问答专区 >
不叫猫先生0
相关课程
一站式学习中心 >
AI驱动的TDSQL-Cserverless实战营
1403人在学
云原生数据库 TDSQL-C
前端
1196人在学
前端
数字化IT从业者知识体系
363人在学
CODING DevOps
软件开发
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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

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

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

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

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论
2
目录
查看详情【社区公告】 技术创作特训营有奖征文