DIY主题自带的预加载动画

2018年6月14日22:58:37 8 阅读(3,306)
本文最后更新于2018年6月14日,已超过一年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

主题自带的预加载动画千篇一律,用这个主题的都是这个动画,感觉不是太好看,不符合我的审美 [酷] ,那就想办法修改一下吧。

我的主题自带的加载动画名字为go.php,打开这个文件把css样式文件改一下,然后div加上样式就ok。

CSS代码:

  1. html, body {
  2.         height: 100%;
  3.         display: flex;
  4.         align-items: center;
  5.         justify-contentcenter;
  6.         background#2D4654;
  7.     }
  8.     .loader {
  9.         width130px;
  10.         height170px;
  11.         positionrelative;
  12.     }
  13.     .loader::before, .loader::after {
  14.         content"";
  15.         width: 0;
  16.         height: 0;
  17.         positionabsolute;
  18.         bottombottom30px;
  19.         left15px;
  20.         z-index: 1;
  21.         border-left50px solid transparent;
  22.         border-right50px solid transparent;
  23.         border-bottom20px solid #1b2a33;
  24.         -webkit-transform: scale(0);
  25.         transform: scale(0);
  26.         transition: all 0.2s ease;
  27.     }
  28.     .loader::after {
  29.         border-right15px solid transparent;
  30.         border-bottom20px solid #162229;
  31.     }
  32.     .loader .getting-there {
  33.         width: 120%;
  34.         text-aligncenter;
  35.         positionabsolute;
  36.         bottombottom: 0;
  37.         left: -7%;
  38.         font-family"Lato";
  39.         font-size12px;
  40.         letter-spacing2px;
  41.         colorwhite;
  42.     }
  43.     .loader .binary {
  44.         width: 100%;
  45.         height140px;
  46.         displayblock;
  47.         colorwhite;
  48.         positionabsolute;
  49.         top: 0;
  50.         left15px;
  51.         z-index: 2;
  52.         overflowhidden;
  53.     }
  54.     .loader .binary::before, .loader .binary::after {
  55.         font-family"Lato";
  56.         font-size24px;
  57.         positionabsolute;
  58.         top: 0;
  59.         left: 0;
  60.         opacity: 0;
  61.     }
  62.     .loader .binary:nth-child(1)::before {
  63.         content"0";
  64.         -webkit-animation: a 1.1s linear infinite;
  65.         animation: a 1.1s linear infinite;
  66.     }
  67.     .loader .binary:nth-child(1)::after {
  68.         content"0";
  69.         -webkit-animation: b 1.3s linear infinite;
  70.         animation: b 1.3s linear infinite;
  71.     }
  72.     .loader .binary:nth-child(2)::before {
  73.         content"1";
  74.         -webkit-animation: c 0.9s linear infinite;
  75.         animation: c 0.9s linear infinite;
  76.     }
  77.     .loader .binary:nth-child(2)::after {
  78.         content"1";
  79.         -webkit-animation: d 0.7s linear infinite;
  80.         animation: d 0.7s linear infinite;
  81.     }
  82.     .loader.JS_on::before, .loader.JS_on::after {
  83.         -webkit-transform: scale(1);
  84.         transform: scale(1);
  85.     }
  86.     @-webkit-keyframes a {
  87.         0% {
  88.             -webkit-transform: translate(30px, 0) rotate(30deg);
  89.             transform: translate(30px, 0) rotate(30deg);
  90.             opacity: 0;
  91.         }
  92.         100% {
  93.             -webkit-transform: translate(30px150px) rotate(-50deg);
  94.             transform: translate(30px150px) rotate(-50deg);
  95.             opacity: 1;
  96.         }
  97.     }
  98.     @keyframes a {
  99.         0% {
  100.             -webkit-transform: translate(30px, 0) rotate(30deg);
  101.             transform: translate(30px, 0) rotate(30deg);
  102.             opacity: 0;
  103.         }
  104.         100% {
  105.             -webkit-transform: translate(30px150px) rotate(-50deg);
  106.             transform: translate(30px150px) rotate(-50deg);
  107.             opacity: 1;
  108.         }
  109.     }
  110.     @-webkit-keyframes b {
  111.         0% {
  112.             -webkit-transform: translate(50px, 0) rotate(-40deg);
  113.             transform: translate(50px, 0) rotate(-40deg);
  114.             opacity: 0;
  115.         }
  116.         100% {
  117.             -webkit-transform: translate(40px150px) rotate(80deg);
  118.             transform: translate(40px150px) rotate(80deg);
  119.             opacity: 1;
  120.         }
  121.     }
  122.     @keyframes b {
  123.         0% {
  124.             -webkit-transform: translate(50px, 0) rotate(-40deg);
  125.             transform: translate(50px, 0) rotate(-40deg);
  126.             opacity: 0;
  127.         }
  128.         100% {
  129.             -webkit-transform: translate(40px150px) rotate(80deg);
  130.             transform: translate(40px150px) rotate(80deg);
  131.             opacity: 1;
  132.         }
  133.     }
  134.     @-webkit-keyframes c {
  135.         0% {
  136.             -webkit-transform: translate(70px, 0) rotate(10deg);
  137.             transform: translate(70px, 0) rotate(10deg);
  138.             opacity: 0;
  139.         }
  140.         100% {
  141.             -webkit-transform: translate(60px150px) rotate(70deg);
  142.             transform: translate(60px150px) rotate(70deg);
  143.             opacity: 1;
  144.         }
  145.     }
  146.     @keyframes c {
  147.         0% {
  148.             -webkit-transform: translate(70px, 0) rotate(10deg);
  149.             transform: translate(70px, 0) rotate(10deg);
  150.             opacity: 0;
  151.         }
  152.         100% {
  153.             -webkit-transform: translate(60px150px) rotate(70deg);
  154.             transform: translate(60px150px) rotate(70deg);
  155.             opacity: 1;
  156.         }
  157.     }
  158.     @-webkit-keyframes d {
  159.         0% {
  160.             -webkit-transform: translate(30px, 0) rotate(-50deg);
  161.             transform: translate(30px, 0) rotate(-50deg);
  162.             opacity: 0;
  163.         }
  164.         100% {
  165.             -webkit-transform: translate(45px150px) rotate(30deg);
  166.             transform: translate(45px150px) rotate(30deg);
  167.             opacity: 1;
  168.         }
  169.     }
  170.     @keyframes d {
  171.         0% {
  172.             -webkit-transform: translate(30px, 0) rotate(-50deg);
  173.             transform: translate(30px, 0) rotate(-50deg);
  174.             opacity: 0;
  175.         }
  176.         100% {
  177.             -webkit-transform: translate(45px150px) rotate(30deg);
  178.             transform: translate(45px150px) rotate(30deg);
  179.             opacity: 1;
  180.         }
  181.     }

HTML代码:

  1. <div class="loader JS_on">
  2.     <span class="binary"></span>
  3.     <span class="binary"></span>
  4.     <span class="getting-there">LOADING ...</span>
  5. </div>

修改前:

DIY主题自带的预加载动画

修改后:

DIY主题自带的预加载动画

PS:截的图不是太好看,这两个都是动态的。。 还有,只有外链的情况下,才会有这个预加载动画。

 

 

完。


 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛

目前评论:8   其中:访客  5   博主  3

    • 影子鱼 影子鱼 1

      这个go.php能发一下嘛?您的网站里没看到您主题的下载页面,所以没有go.php

        • 舍得 舍得

          @影子鱼 目前我又换预加载动画了,不知道你要的是哪个呢?

            • 影子鱼 影子鱼 1

              @舍得 又换了一个?那可以的话,想两个都看看怎么样 [挤眼]

          • 雅兮网 雅兮网 0

            非常不错的CSS代码

            • 明月清风 明月清风 3

              其实这个样式主要是看个人的喜欢啦,没必要标新立异啦!