四个Loading加载动画,还不快快存起来!

2995次阅读 197人点赞 作者: WuBin 发布时间: 2021-10-11 16:24:57
扫码到手机查看

loading-1

平时开发的时候,我们遇到加载,要么是 UI 框架中自带,要么就是百度,然后 CV 到项目中?但是,自己实现的时候,又会没有思路。久而久之,变成了 CV 工程师。本文针对不同的加载方式,讲解其中的思路,希望大家不只是会用,更要是会写。实践才能出真知。

<span class="loader-1">Loading</span>
.loader-1 {
    font-size: 48px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FF3D00;
    letter-spacing: 2px;
    position: relative;
}
.loader-1::after {
    content: "Loading";
    position: absolute;
    left: 0;
    top: 0;
    color: #FFF;
    width: 100%;
    height: 50%;
    overflow: hidden;
    animation: loaderHeight 6s linear infinite;
}
@keyframes loaderHeight {
    0% {
      height: 100%;
    }
    100% {
      height: 0%;
    }
  }

案例效果:http://code.wubin.work/code/css/loading-four.html

loading-2

 <span class="loader-2">Loading </span>
.loader-2{
    font-size: 48px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #263238;
    text-shadow: 0 0 2px #fff, 0 0 1px #fff, 0 0 1px #fff;
    letter-spacing: 2px;
    position: relative;
}
.loader-2::after {
    content: "Loading";
    position: absolute;
    left: 0;
    top: 0;
    color: #FFF;
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: loderWidth 6s linear infinite;
}
@keyframes loderWidth {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

案例效果:http://code.wubin.work/code/css/loading-four.html

loading-3

<span class="loader-3">Load&nbsp;ng </span>
这里用了一个空格来占位
.loader-3 {
  color: #FFF;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 48px;
  letter-spacing: 4px;
}
.loader-3::before {
  content: "";
  position: absolute;
  right: 70px;
  bottom: 10px;
  height: 28px;
  width: 5.15px;
  background: currentColor;
  animation: loaderL 1s linear infinite alternate;

}
@keyframes loaderL {
    0% {
      box-shadow: 0 -6px, -122.9px -8px;
    }
    25%, 75% {
      box-shadow: 0 0px, -122.9px -8px;
    }
    100% {
      box-shadow: 0 0px, -122.9px -16px;
    }
}
.loader-3::after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    left: 125px;
    top: 2px;
    border-radius: 50%;
    background: red;
    animation: animloader113 1s linear infinite alternate;
  }
  @keyframes animloader113 {
      0% {
        transform: translate(0px, 0px) scaleX(1);
      }
      14% {
        transform: translate(-12px, -16px) scaleX(1.05);
      }
      28% {
        transform: translate(-27px, -28px) scaleX(1.07);
      }
      42% {
        transform: translate(-46px, -35px) scaleX(1.1);
      }
      57% {
        transform: translate(-70px, -37px) scaleX(1.1);
      }
      71% {
        transform: translate(-94px, -32px) scaleX(1.07);
      }
      85% {
        transform: translate(-111px, -22px) scaleX(1.05);
      }
      100% {
        transform: translate(-125px, -9px) scaleX(1);
      }
    }

注意这里的L上方竖线,是使用before阴影模拟的效果。

案例效果:http://code.wubin.work/code/css/loading-four.html

loading-4

<span class="loader-4">Loading </span>
.loader-4 {
    font-size: 48px;
    letter-spacing: 2px;
    color: #FFF;
    animation: loader4 1s ease-in infinite alternate;
}
@-webkit-keyframes loader4 {
   0% {
     filter: blur(0px);
     transform: skew(0deg);
   }
   100% {
     filter: blur(3px);
     transform: skew(-4deg);
   }
 }

案例效果:http://code.wubin.work/code/css/loading-four.html

点赞 支持一下 觉得不错?客官您就稍微鼓励一下吧!
关键词:Loading加载动画
推荐阅读
  • uniapp实现被浏览器唤起的功能

    当用户打开h5链接时候,点击打开app若用户在已经安装过app的情况下直接打开app,若未安装过跳到应用市场下载安装这个功能在实现上主要分为两种场景,从普通浏览器唤醒以及从微信唤醒。

    8337次阅读 531人点赞 发布时间: 2022-12-14 16:34:53 立即查看
  • Vue

    盘点Vue2和Vue3的10种组件通信方式

    Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异;本文将通过选项式API组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。

    3474次阅读 255人点赞 发布时间: 2022-08-19 09:40:16 立即查看
  • JS

    几个高级前端常用的API

    推荐4个前端开发中常用的高端API,分别是MutationObserver、IntersectionObserver、getComputedstyle、getBoundingClientRect、requ...

    13422次阅读 867人点赞 发布时间: 2021-11-11 09:39:54 立即查看
  • PHP

    【正则】一些常用的正则表达式总结

    在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。了解一些常用的正则表达式,能大大提高你的工作效率。

    12217次阅读 392人点赞 发布时间: 2021-10-09 15:58:58 立即查看
  • 【中文】免费可商用字体下载与考证

    65款免费、可商用、无任何限制中文字体打包下载,这些字体都是经过长期验证,经得住市场考验的,让您规避被无良厂商起诉的风险。

    10562次阅读 846人点赞 发布时间: 2021-07-05 15:28:45 立即查看
  • Vue

    Vue3开发一个v-loading的自定义指令

    在vue3中实现一个自定义的指令,有助于我们简化开发,简化复用,通过一个指令的调用即可实现一些可高度复用的交互。

    14437次阅读 1153人点赞 发布时间: 2021-07-02 15:58:35 立即查看
  • JS

    关于手机上滚动穿透问题的解决

    当页面出现浮层的时候,滑动浮层的内容,正常情况下预期应该是浮层下边的内容不会滚动;然而事实并非如此。在PC上使用css即可解决,但是在手机端,情况就变的比较复杂,就需要禁止触摸事件才可以。

    14342次阅读 1167人点赞 发布时间: 2021-05-31 09:25:50 立即查看
  • Vue

    Vue+html2canvas截图空白的问题

    在使用vue做信网单页专题时,有海报生成的功能,这里推荐2个插件:一个是html2canvas,构造好DOM然后转canvas进行截图;另外使用vue-canvas-poster(这个截止到2021年3月...

    27483次阅读 2157人点赞 发布时间: 2021-03-02 09:04:51 立即查看
  • Vue

    vue-router4过度动画无效解决方案

    在初次使用vue3+vue-router4时候,先后遇到了过度动画transition进入和退出分别无效的情况,搜遍百度没没找到合适解决方法,包括vue-route4有一些API都进行了变化,以前的一些操...

    23619次阅读 1820人点赞 发布时间: 2021-02-23 13:37:20 立即查看
交流 收藏 目录