css 加载效果

filter 改变图片颜色

tupain filter

闹铃效果

.belling {
    animation-name: upAnimation;
    transform-origin: center top;
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-delay: .5s;
  }
@keyframes upAnimation {
      0% {
          transform: rotate(0deg);
          transition-timing-function: cubic-bezier(0.215,.61,.355,1);
      }
      10% {
          transform: rotate(-12deg);
          transition-timing-function: cubic-bezier(0.215,.61,.355,1);
      }
      20% {
          transform: rotate(12deg);
          transition-timing-function: cubic-bezier(0.215,.61,.355,1);
      }
      28% {
          transform: rotate(-10deg);
          transition-timing-function: cubic-bezier(0.215,.61,.355,1);
      }
      36% {
          transform: rotate(10deg);
          transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
      }
      42% {
          transform: rotate(-8deg);
          transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
      }
      48% {
          transform: rotate(8deg);
          transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
      }
      52% {
          transform: rotate(-4deg);
          transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
      }
      56% {
          transform: rotate(4deg);
          transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
      }
      60% {
          transform: rotate(0deg);
          transition-timing-function: cubic-bezier(0.755,.5,.855,.06);
      }
      100% {
            transform: rotate(0deg);
            transition-timing-function: cubic-bezier(0.215,.61,.355,1);
      }
  }

预加载文章段落

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

<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: ani_loading 1s linear infinite

<div class="loading_p border"></div>
@keyframes ani_loading {
  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: ani_loading 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: ani_loading2 1s infinite step-start step-start 连接

<div class="boxgray">
  <div class="loading2"></div>
</div>
@keyframes ani_loading2 {
  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: ani_loading2 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);
}
posted @ 2021-09-05 20:35  雨天。我  阅读(95)  评论(0)    收藏  举报