Hexo Heo同款loading动画 安知鱼 2022-09-16 2023-09-02 原创HEO
点击查看参考教程 昨天看到洪哥的加载动画很奇特,就只有一个头像,之前一直以为洪哥没有加载动画原来是加载太快看不到
效果预览 本站 满屏与 pace 同时启用
butterfly 4.5 以上方案 修改 themes/butterfly/layout/includes/loading/fullpage-loading.pug
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 #loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")') .loading-bg div.loading-img .loading-image-dot script. const preloader = { endLoading: () => { document.body.style.overflow = 'auto'; document.getElementById('loading-box').classList.add("loaded") }, initLoading: () => { document.body.style.overflow = ''; document.getElementById('loading-box').classList.remove("loaded") } } window.addEventListener('load',()=> { preloader.endLoading() }) if (!{theme.pjax && theme.pjax.enable}) { document.addEventListener('pjax:send', () => { preloader.initLoading() }) document.addEventListener('pjax:complete', () => { preloader.endLoading() }) }
修改themes/butterfly/layout/includes/loading/index.pug
1 2 3 4 5 6 7 if theme.preloader.source === 1 include ./fullpage-loading.pug else if theme.preloader.source === 2 include ./pace.pug else include ./fullpage-loading.pug include ./pace.pug
新建source/css/progress_bar.css
, 也可以不做这一步下面配置文件pace_css_url
这一项就要留空, 这一步是修改 pace 加载的胶囊 💊 样式用的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 .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 : 10px ; left : 0 ; right : 0 ; height : 8px ; border-radius : 8px ; width : 4rem ; background : #eaecf2 ; border : 1px #e3e8f7 ; overflow : hidden; } .pace-inactive .pace-progress { opacity : 0 ; transition : 0.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% ; background : linear-gradient (-45deg , #ee7752 , #e73c7e , #23a6d5 , #23d5ab ); animation : gradient 1.5s ease infinite; background-size : 200% ; } .pace .pace-inactive { opacity : 0 ; transition : 0.3s ; top : -8px ; } @keyframes gradient { 0% { background-position : 0% 50% ; } 50% { background-position : 100% 50% ; } 100% { background-position : 0% 50% ; } }
修改themes/butterfly/source/css/_layout/loading.styl
, 注意其中颜色代码--anzhiyu-card-bg
等需自行替换为自己的色值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 if hexo-config ('preloader' ) .loading-bg display : flex; width : 100% ; height : 100% ; position : fixed; background : var (--anzhiyu-card-bg); z-index : 1001 ; opacity : 1 ; transition : .3s ; #loading-box .loading-img width : 100px ; height : 100px ; border-radius : 50% ; margin : auto; border : 4px solid #f0f0f2 ; animation-duration : .3s ; animation-name : loadingAction; animation-iteration-count : infinite; animation-direction : alternate; .loading-image-dot width : 30px ; height : 30px ; background : #6bdf8f ; position : absolute; border-radius : 50% ; border : 6px solid #fff ; top : 50% ; left : 50% ; transform : translate (18px , 24px ); &.loaded .loading-bg opacity : 0 ; z-index : -1000 ; @keyframes loadingAction 0% { opacity : 1 ; } 100% { opacity : .4 ; }
在合适的地方加上自定义 css, 其中 background
的 url 即为 loading 的图片地址
。
不会的同学参考Hexo 博客添加自定义 css 和 js 文件
1 2 3 4 .loading-img { background : url (https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/avatar.webp ) no-repeat center center; background-size : cover; }
最后修改_config.butterfly.yml
中preloader
选项, 改完以后source: 1
为满屏加载无pace胶囊
,source: 2
为pace胶囊
无满屏动画, source: 3
是两者都启用。
1 2 3 4 5 6 7 8 9 10 11 preloader: enable: true source: 3 pace_css_url: /css/progress_bar.css avatar:
butterfly 4.4.2 以下版本方案 旧版方案 将themes/butterfly/source/css/_layout/loading.styl
替换为以下代码,其中颜色代码注意换成自己的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 if hexo-config ('preloader' ) .loading-bg display : flex; width : 100% ; height : 100% ; position : fixed; background : var (--anzhiyu-card-bg); z-index : 1001 ; opacity : 1 ; transition : .3s ; #loading-box .loading-img width : 100px ; height : 100px ; border-radius : 50% ; margin : auto; border : 4px solid #f0f0f2 ; animation-duration : .3s ; animation-name : loadingAction; animation-iteration-count : infinite; animation-direction : alternate; .loading-image-dot width : 30px ; height : 30px ; background : #6bdf8f ; position : absolute; border-radius : 50% ; border : 6px solid #fff ; top : 50% ; left : 50% ; transform : translate (18px , 24px ); &.loaded .loading-bg opacity : 0 ; z-index : -1000 ; @keyframes loadingAction 0% { opacity : 1 ; } 100% { opacity : .4 ; }
替换themes/butterfly/layout/includes/loading/loading.pug
, 其中图片注意换成自己的.
1 2 3 4 #loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")') .loading-bg div.loading-img .loading-image-dot
在合适的地方加上自定义 css, 其中 background
的 url 即为 loading 的图片地址
。
不会的同学参考Hexo 博客添加自定义 css 和 js 文件
1 2 3 4 .loading-img { background : url (https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/avatar.webp ) no-repeat center center; background-size : cover; }