魔改前请备份，要不然出错了又不知道怎么改就完啦！！！
## 顶部细线加载条 详见：[给Butterfly加上顶部加载条](https://www.qcqx.cn/article/13d6481a.html) 1. 旧版顶部长条 引入css ```css .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace-inactive { display: none; } .pace .pace-progress { background: #e90f92; position: fixed; z-index: 2000; top: 0; right: 100%; width: 100%; height: 2px; } .pace .pace-progress-inner { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #e90f92, 0 0 5px #e90f92; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); -o-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } .pace .pace-activity { display: block; position: fixed; z-index: 2000; top: 15px; right: 15px; width: 14px; height: 14px; border: solid 2px transparent; border-top-color: #e90f92; border-left-color: #e90f92; border-radius: 10px; -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; -ms-animation: pace-spinner 400ms linear infinite; -o-animation: pace-spinner 400ms linear infinite; animation: pace-spinner 400ms linear infinite; } @-webkit-keyframes pace-spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes pace-spinner { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes pace-spinner { 0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes pace-spinner { 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes pace-spinner { 0% { transform: rotate(0deg); transform: rotate(0deg); } 100% { transform: rotate(360deg); transform: rotate(360deg); } } /* 在下面修改进度条外观 */ .pace .pace-progress { background: #1ef4fbec; /*进度条颜色*/ height: 3px;/* 进度条厚度 */ } .pace .pace-progress-inner { box-shadow: 0 0 10px #1ef4fbce, 0 0 5px #1ecffbd0; /*阴影颜色*/ } .pace .pace-activity { border-top-color: #1edafbe5; /*上边框颜色*/ border-left-color: #1ef4fbec; /*左边框颜色*/ } ``` 2. 引入js(建议保存到本地引入) ```js ``` 然后三连刷新就能看到了 ```bash hexo cl;hexo g;hexo s ``` --- ## 新版顶部胶囊加载条（本站使用中） 1. 添加css（注意，两款加载条二选一，不要同时用） ```css /* 加载条 */ .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; z-index: 2000; position: fixed; margin: auto; top: 4px; left: 0; right: 0; height: 8px; border-radius: 8px; width: 7rem; background: #eaecf2; border: 1px #e3e8f7; overflow: hidden } .pace-inactive .pace-progress { opacity: 0; transition: .3s ease-in } .pace .pace-progress { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); max-width: 200px; position: absolute; z-index: 2000; display: block; top: 0; right: 100%; height: 100%; width: 100%; /* linear-gradient(to right, #3494e6, #ec6ead) */ background: linear-gradient(to right, #43cea2, #3866ca); animation: gradient 2s ease infinite; background-size: 200% } .pace.pace-inactive { opacity: 0; transition: .3s; top: -8px } ``` 然后引入新版js，依然推荐保存到本地引入 ```js - ``` 最后三连刷新就能看到了 ```bash hexo cl;hexo g;hexo s ``` 下期预告：`引入阿里iconfont自定义图标`