css 加载效果

时间:2021-09-05
本文章向大家介绍css 加载效果,主要包括css 加载效果使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

预加载文章段落

使用 三行背景色,首行(透明+灰)、尾行(灰+透明)、中间行(重复灰)

---copy
<div class="loading_p border"></div>
// scss
.load_Ping{
  $line: 3;
  $baseWidth: 32px;
  $padding: 40px;
  $baseColor: #eee;
  min-height: ($baseWidth * ($line + 2) + ($padding * 2));
  box-sizing: border-box;
  padding: $padding;
  background-image: linear-gradient(90deg,transparent 0px, transparent 40px,$baseColor $padding),repeating-linear-gradient(180deg,$baseColor 0px, $baseColor ($baseWidth/2),transparent ($baseWidth/2),transparent $baseWidth), linear-gradient(90deg,$baseColor 70%, transparent 70%);
  background-size:calc(100% - #{$padding * 2}) ($baseWidth/2), calc(100% - #{$padding * 2}) ($baseWidth * $line),calc(100% - #{$padding * 2}) ($baseWidth/2);
  background-repeat:no-repeat;
  background-position:$padding $padding, $padding ($padding + $baseWidth), $padding ($padding + (($baseWidth * ($line + 1))));
}

预加loading

通过动画实现 animation: aniLoading 1s linear infinite

---copy
<div class="loading_p border"></div>
@keyframes aniLoading {
  0% {transform: translate(-50%,-50%) rotate(0deg)}
  100% {transform: translate(-50%,-50%) rotate(360deg)}
}
.loading{ position: relative; height: 200px; }
.loading::before{
  content: ''; position: absolute; height: 6px; width: 30px; border-left: 4px solid #91ae83;
  border-right: 4px solid #91ae83; box-sizing: border-box; top: 50%; left: 50%; transform: rotate(0) translate(-50%, -50%);
  transform-origin: 50% 50%; animation: aniLoading 1s linear infinite ; z-index: 101;
}
.loading::after{ content: ''; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.8); z-index: 100;}

通过逐帧动画的方式 animation: aniLoading2 1s infinite step-start step-start 连接

---copy
<div class="boxgray">
  <div class="loading2"></div>
</div>
@keyframes aniLoading2 {
  0% {transform: translate(-50%,-50%) rotate(360deg)}
  16% {transform: translate(-50%,-50%) rotate(300deg)}
  33% {transform: translate(-50%,-50%) rotate(240deg)}
  49% {transform: translate(-50%,-50%) rotate(180deg)}
  66% {transform: translate(-50%,-50%) rotate(120deg)}
  82% {transform: translate(-50%,-50%) rotate(60deg)}
  100% {transform: translate(-50%,-50%) rotate(0deg)}
}
.loading2 {
  position: absolute; height: 6px; width: 40px; top: 50%; left: 50%; transform: rotate(0) translate(-50%, -50%);
  border-left: 4px solid rgba(115,141,101,1);
  border-right: 4px solid rgba(115,141,101,0.4);
  box-sizing: border-box; animation: aniLoading2 1s infinite step-start;
}
.loading2::before{
  content: ''; position: absolute; box-sizing: border-box; height: 100%; width: 40px; top: 0px; left: -4px; transform: rotate(60deg);
  border-left: 4px solid rgba(115,141,101,0.8);
  border-right: 4px solid rgba(115,141,101,0.2);
}
.loading2::after{
  content: ''; position: absolute; box-sizing: border-box; height: 100%; width: 40px; top: 0px; left: -4px; transform: rotate(120deg);
  border-left: 4px solid rgba(115,141,101,0.6);
  border-right: 4px solid rgba(115,141,101,0);
}

原文地址:https://www.cnblogs.com/voxov/p/15215926.html