前端页面初始化动画 loading 的几种效果

2020-4-17 Jon html+css

前端开发时页面初始化如果不做处理会显示空白，这样用户体验就会比较差，如果替换成加载的动画，这样不仅好看，还能提升用户体验，下面就记录几种常用的页面首屏加载动画效果，都是纯css

彩条转圈 loading 动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>彩条转圈 loading 动画</title>
  <style>@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@-moz-keyframes spin{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.spinner{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1003;background: #000000;overflow:hidden}  .spinner .blob:first-child{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;box-shadow:0 3px 3px 0 rgba(255,56,106,1);transform:translate3d(0,0,0);animation:spin 2s linear infinite}  .spinner .blob:first-child:after,.spinner .blob:first-child:before{content:'';position:absolute;border-radius:50%}  .spinner .blob:first-child:before{top:5px;left:5px;right:5px;bottom:5px;box-shadow:0 3px 3px 0 rgb(255, 228, 32);-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}  .spinner .blob:first-child:after{top:15px;left:15px;right:15px;bottom:15px;box-shadow:0 3px 3px 0 rgba(61, 175, 255,1);animation:spin 1.5s linear infinite}</style>
</head>
<body>
  <div class="spinner">
    <div class="blob blob-0"></div>
    <div class="blob blob-1"></div>
    <div class="blob blob-2"></div>
    <div class="blob blob-3"></div>
    <div class="blob blob-4"></div>
    <div class="blob blob-5"></div>
  </div>
</body>
</html>

您可以修改框中代码后运行查看

点点点平滑过渡 loading 动画

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>点点点平滑过渡 loading 动画</title>
  <style type="text/css">
    /* 初始动画 */
    .preloader {position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;background: #49a9ee; /*#ee6736*/;z-index: 9999;transition: opacity .65s}
    .preloader-hidden-add {opacity: 1;display: block}
    .preloader-hidden-add-active {opacity: 0}
    .preloader-hidden {display: none}
    .cs-loader {position: absolute;top: 0;left: 0;height: 100%;width: 100%}
    .cs-loader-inner {transform: translateY(-50%);top: 50%;position: absolute;width: 100%;color: #fff;text-align: center}
    .cs-loader-inner label {font-size: 20px;opacity: 0;display: inline-block}
    @keyframes lol {0% {opacity: 0;transform: translateX(-300px)}33% {opacity: 1;transform: translateX(0)}66% {opacity: 1;transform: translateX(0)}100% {opacity: 0;transform: translateX(300px)}}
    .cs-loader-inner label:nth-child(6) {animation: lol 3s infinite ease-in-out}
    .cs-loader-inner label:nth-child(5) {animation: lol 3s .1s infinite ease-in-out}
    .cs-loader-inner label:nth-child(4) {animation: lol 3s .2s infinite ease-in-out}
    .cs-loader-inner label:nth-child(3) {animation: lol 3s .3s infinite ease-in-out}
    .cs-loader-inner label:nth-child(2) {animation: lol 3s .4s infinite ease-in-out}
    .cs-loader-inner label:nth-child(1) {animation: lol 3s .5s infinite ease-in-out}
  </style>
</head>
<body>
  <div class="preloader">
    <div class="cs-loader">
      <div class="cs-loader-inner">
        <label> ●</label>
        <label> ●</label>
        <label> ●</label>
        <label> ●</label>
        <label> ●</label>
        <label> ●</label>
      </div>
    </div>
  </div>
</body>
</html>

您可以修改框中代码后运行查看

字符跳动 loading 动画

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字符跳动 loading 动画</title>
  <style>
    @import url("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap");
    .preloader-box {position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;background: #ed6c1f;z-index: 9999;transition: opacity .65s;display: flex;height: 100vh;justify-content: center;align-items: center;text-align: center;}
    .preloader {display: flex;color: white;font-size: 5em;font-family: "Baloo Bhaijaan", "initial";/* text-transform: uppercase; */}
    .preloader .inner {text-shadow: 0 1px #bbb, 0 2px #bbb, 0 3px #bbb, 0 4px #bbb, 0 5px #bbb, 0 6px transparent, 0 7px transparent, 0 8px transparent, 0 9px transparent, 0 10px 10px rgba(0, 0, 0, 0.4);transform: translateY(20px);margin-left: 2px;margin-right: 2px;}
    .preloader .inner:nth-child(1) {animation: prebounce 0.3s infinite alternate;}
    .preloader .inner:nth-child(2) {animation: prebounce 0.3s .1s infinite alternate;}
    .preloader .inner:nth-child(3) {animation: prebounce 0.3s .2s infinite alternate;}
    .preloader .inner:nth-child(4) {animation: prebounce 0.3s .3s infinite alternate;}
    @keyframes prebounce {to {text-shadow: 0 1px #bbb, 0 2px #bbb, 0 3px #bbb, 0 4px #bbb, 0 5px #bbb, 0 6px #bbb, 0 7px #bbb, 0 8px #bbb, 0 9px #bbb, 0 50px 25px rgba(0, 0, 0, 0.2);  transform: translateY(-20px);}}
  </style>
</head>
<body>
  <div class="preloader-box">
    <div class="preloader">
      <span class="inner">Z</span>
      <span class="inner">X</span>
      <span class="inner">Q</span>
      <span class="inner">D</span>
    </div>
  </div>
</body>
</html>

您可以修改框中代码后运行查看

移动端圆形 loading 动画

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动端圆形 loading 动画</title>
  <style>
    .spinner {width: 60px;height: 60px;position: relative;margin: 100px auto;}
    .double-bounce1, .double-bounce2 {width: 100%;height: 100%;border-radius: 50%;background-color: #67CF22;opacity: 0.6;position: absolute;top: 0;left: 0;-webkit-animation: bounce 2.0s infinite ease-in-out;animation: bounce 2.0s infinite ease-in-out;}
    .double-bounce2 {-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}
    @-webkit-keyframes bounce {0%, 100% { -webkit-transform: scale(0.0) }50% { -webkit-transform: scale(1.0) }}
    @keyframes bounce {0%, 100% {transform: scale(0.0);  -webkit-transform: scale(0.0);} 50% {transform: scale(1.0);  -webkit-transform: scale(1.0);}}
  </style>
</head>
<body>
  <div class="spinner">
    <div class="double-bounce1"></div>
    <div class="double-bounce2"></div>
  </div>
</body>
</html>

您可以修改框中代码后运行查看

移动端矩形 loading 动画

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动端矩形 loading 动画 2</title>
  <style>
    .spinner {position: absolute;top: 50%;left: 50%;margin-left: -25px;margin-top: -30px;width: 50px;height: 60px;text-align: center;font-size: 10px;}
    .spinner > .double {background: #49a9ee;height: 100%;width: 6px;display: inline-block;-webkit-animation: stretchDelay 1.2s infinite ease-in-out;animation: stretchDelay 1.2s infinite ease-in-out;}
    .spinner .rect2 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}
    .spinner .rect3 {-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}
    .spinner .rect4 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}
    .spinner .rect5 {-webkit-animation-delay: -0.8s;animation-delay: -0.8s;}
    @-webkit-keyframes stretchDelay {0%, 40%, 100% {-webkit-transform: scaleY(0.4)}20% {-webkit-transform: scaleY(1.0)}}
    @keyframes stretchDelay {0%, 40%, 100% {transform: scaleY(0.4);  -webkit-transform: scaleY(0.4);}20% {transform: scaleY(1.0);  -webkit-transform: scaleY(1.0);}}
  </style>
</head>
<body>
  <div class="spinner">
    <div class="double rect1"></div>
    <div class="double rect2"></div>
    <div class="double rect3"></div>
    <div class="double rect4"></div>
    <div class="double rect5"></div>
  </div>
</body>
</html>

您可以修改框中代码后运行查看

标签: 前端动画 loading 初始化单页面效果 css

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇Angular 9.1.0 线上报错 ReferenceError: _rollupMoment__default is not defined
上一篇VSCode markdown 文件中无法使用用户代码片段 snippet 问题

发表评论：

知向前端

前端页面初始化动画 loading 的几种效果

彩条转圈 loading 动画

点点点平滑过渡 loading 动画

字符跳动 loading 动画

移动端圆形 loading 动画

移动端矩形 loading 动画

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档