DIY主题自带的预加载动画

2018年6月14日22:58:37 8 阅读(3,597)

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

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

CSS代码：

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

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
      回复 2019年2月26日 下午10:08   地板

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

        • 舍得 舍得
          回复 2019年2月26日 下午10:16

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

            • 影子鱼 影子鱼 1
              回复 2019年2月26日 下午10:31

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

          • 雅兮网 雅兮网 0
            回复 2018年6月27日 下午3:14   板凳

            非常不错的CSS代码

            • 明月清风 明月清风 3
              回复 2018年6月16日 上午9:17   沙发

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