神工大成哈哈哈哈（欸不对这玩意是不是应该放技术馆）

Komeiji小五

写了十五天的加载动画，终于成了。
先展示
blog.komeijiv.cn
komeijiv.cn

       

                       

       

                                                       

其实还是有点没对齐

       

我的博客一直没有加载动画，每次打开网页内容都是直接蹦出来，总觉得不太美观。
为了彰显我的技术力厨力，我就想自己动手，做一个旋转的红白阴阳图来当加载动画。

这图看上去挺简单的：一个完整的圆，由两条对称的阴阳鱼组成，每条鱼里还有个相反颜色的小圆点。
可光是怎么实现，我就想了了两天。

一开始我异想天开，打算用四个伪元素（::before、::after）来拼出这个图形。
结果在CSS里调来调去，各种对不齐，左边矫正了，右边就不知道偏到哪里去了。
硬着头皮试了两个小时，只能放弃。
然后就是到处查资料，参考别人的加载动画——说来也怪，我愣是没找到一个用太极图当加载动画的例子。
最后，我想到可以用三层结构来搭建这个复杂的图形。

CSS代码总算写出来了，效果看着挺满意。
可我的博客用的是Butterfly主题，样式文件是.styl格式，纯CSS不能直接往里扔。
于是又花了几个小时，吭哧吭哧地重新移植了一遍。

没想到，等我把加载动画部署好的时候，发现它一闪就没了，根本起不到遮丑的作用。
检查了好几遍fullpage-loading.pug，代码明明是对的，命令行也没报错。缓存清了一次又一次，还是老样子。
没辙了，只能开始漫长的排查。查了两天，什么也没发现。

实在没办法，我又回去翻店长的旧教程（新版本已经不适配了）。看了一半，突然看到了夜间背景切换的教程，突然悟了，我把背景魔改了。
原版的Butterfly没法检测到我那个自定义背景是否加载完成，所以只要md文档一加载好，它就认为页面准备好了，加载动画也就立刻结束了。

都折腾到这地步了，不继续那我写的加载动画不白瞎了吗？只好又硬着头皮，从背景加载的逻辑开始重新啃。
说起来都怪自己，当初图省事，魔改背景的时候完全是照抄，一行注释都没加，现在看自己的代码像看天书一样。
偷懒果然没好下场

又花了几天时间，一边理解一边加注释，等到终于调通的时候，注释也差不多写满了，整个主题文件的大小估计涨了四分之一。

今天总算全部搞定了。我把核心的CSS样式贴在下面，万一论坛里也有朋友用Butterfly主题，说不定能用得上呢。
这段代码主要就是画出那个会旋转的太极图，你可以把它放在自定义的样式文件里，再配合一点点JavaScript来控制显示和隐藏的时机就好了。
更详细的解读我会放在博客里的。

fullpage-loading.pug：

1. #loading-box
   
2.   .loading-left-bg
   
3.   .loading-right-bg
   
4.   .spinner-box
   
5.     .bagua
   
6.       .bagua-inner
   
7.     .loading-word 少女祈祷中...
   
8. 
   
9. script.
   
10.   (()=>{
    
11.     const $loadingBox = document.getElementById('loading-box')
    
12.     const $body = document.body
    
13.     const $spinnerBox = document.querySelector('.spinner-box')
    
14.    
    
15.     const preloader = {
    
16.       endLoading: () => {
    
17.         if ($loadingBox.classList.contains('loaded')) return
    
18.         $body.style.overflow = ''
    
19.         $loadingBox.classList.add('loaded')
    
20.       },
    
21.       initLoading: () => {
    
22.         $body.style.overflow = 'hidden'
    
23.         $loadingBox.classList.remove('loaded')
    
24.         // 移除淡入效果，为下次加载做准备
    
25.         if ($spinnerBox) {
    
26.           $spinnerBox.classList.remove('fade-in')
    
27.         }
    
28.       },
    
29.       fadeInContent: () => {
    
30.         // 添加淡入效果
    
31.         if ($spinnerBox && !$spinnerBox.classList.contains('fade-in')) {
    
32.           $spinnerBox.classList.add('fade-in')
    
33.         }
    
34.       }
    
35.     }
    
36. 
    
37.     preloader.initLoading()
    
38. 
    
39.     // 函数：检测当前body的背景图是否加载完成
    
40.     function checkBackgroundImage() {
    
41.       return new Promise((resolve) => {
    
42.         // 直接获取当前body的背景图
    
43.         const computedStyle = window.getComputedStyle(document.body)
    
44.         const bgImage = computedStyle.backgroundImage
    
45.         
    
46.         // 提取URL
    
47.         const urlMatch = bgImage.match(/url\(['"]?(.*?)['"]?\)/)
    
48.         
    
49.         // 如果没有背景图，直接返回
    
50.         if (!urlMatch || !urlMatch[1]) {
    
51.           console.log('没有检测到背景图，跳过加载检测')
    
52.           resolve(false)
    
53.           return
    
54.         }
    
55.         
    
56.         const bgUrl = urlMatch[1]
    
57.         console.log('检测到背景图URL:', bgUrl)
    
58.         
    
59.         // 创建Image对象预加载背景图
    
60.         const img = new Image()
    
61.         img.onload = () => {
    
62.           console.log('背景图加载完成')
    
63.           resolve(true)
    
64.         }
    
65.         img.onerror = () => {
    
66.           console.log('背景图加载失败')
    
67.           resolve(false)
    
68.         }
    
69.         img.src = bgUrl
    
70.         
    
71.         if (img.complete) {
    
72.           console.log('背景图已缓存')
    
73.           resolve(true)
    
74.         }
    
75.       })
    
76.     }
    
77. 
    
78.     // 主加载逻辑 - 确保至少显示3秒
    
79.     async function startLoading() {
    
80.       // 记录开始时间
    
81.       const startTime = Date.now()
    
82.       const MINIMUM_DISPLAY_TIME = 3000 // 最小显示时间：3秒
    
83.       
    
84.       // 先触发淡入动画（延迟500ms让黑幕先显示）
    
85.       setTimeout(() => {
    
86.         preloader.fadeInContent()
    
87.       }, 500)
    
88.       
    
89.       // 等待DOM加载完成
    
90.       if (document.readyState === 'loading') {
    
91.         await new Promise(resolve => {
    
92.           document.addEventListener('DOMContentLoaded', resolve)
    
93.         })
    
94.       }
    
95.       
    
96.       console.log('DOM加载完成，开始检测背景图')
    
97.       
    
98.       // 等待当前背景图加载
    
99.       const bgLoadResult = await checkBackgroundImage()
    
100.       
     
101.       // 计算已用时间
     
102.       const elapsedTime = Date.now() - startTime
     
103.       const remainingTime = MINIMUM_DISPLAY_TIME - elapsedTime
     
104.       
     
105.       console.log(`背景图检测${bgLoadResult ? '成功' : '失败'}，已用时 ${elapsedTime}ms`)
     
106.       
     
107.       // 如果已经超过3秒，立即结束；否则等待剩余时间
     
108.       if (remainingTime > 0) {
     
109.         console.log(`需要等待额外 ${remainingTime}ms 达到3秒最小显示时间`)
     
110.         await new Promise(resolve => setTimeout(resolve, remainingTime))
     
111.       } else {
     
112.         console.log('已超过3秒最小显示时间，立即结束')
     
113.       }
     
114.       
     
115.       // 结束加载
     
116.       preloader.endLoading()
     
117.     }
     
118. 
     
119.     // 启动加载检测
     
120.     startLoading().catch((error) => {
     
121.       console.error('加载检测出错:', error)
     
122.       // 如果出错，至少显示2秒
     
123.       setTimeout(preloader.endLoading, 2000)
     
124.     })
     
125. 
     
126.     // 超时保护：8秒后强制结束
     
127.     setTimeout(preloader.endLoading, 8000)
     
128. 
     
129.     // PJAX支持
     
130.     if (!{theme.pjax && theme.pjax.enable}) {
     
131.       btf.addGlobalFn('pjaxSend', preloader.initLoading, 'preloader_init')
     
132.       btf.addGlobalFn('pjaxComplete', async () => {
     
133.         // 每次PJAX完成后重新触发淡入效果
     
134.         setTimeout(() => {
     
135.           preloader.fadeInContent()
     
136.         }, 300)
     
137.         
     
138.         // 然后重新检测背景图并至少显示3秒
     
139.         const startTime = Date.now()
     
140.         const MINIMUM_DISPLAY_TIME = 3000
     
141.         
     
142.         try {
     
143.           const bgLoadResult = await checkBackgroundImage()
     
144.          
     
145.           const elapsedTime = Date.now() - startTime
     
146.           const remainingTime = MINIMUM_DISPLAY_TIME - elapsedTime
     
147.          
     
148.           console.log(`PJAX背景图检测${bgLoadResult ? '成功' : '失败'}，已用时 ${elapsedTime}ms`)
     
149.          
     
150.           if (remainingTime > 0) {
     
151.             setTimeout(preloader.endLoading, remainingTime)
     
152.           } else {
     
153.             setTimeout(preloader.endLoading, 300)
     
154.           }
     
155.         } catch (error) {
     
156.           console.error('PJAX背景图检测出错:', error)
     
157.           setTimeout(preloader.endLoading, 300)
     
158.         }
     
159.       }, 'preloader_end')
     
160.     }
     
161.   })()

复制代码

loading.styl：

1. if hexo-config('preloader.enable') && hexo-config('preloader.source') == 1
   
2.   .loading-bg
   
3.     position: fixed
   
4.     z-index: 1000
   
5.     width: 50%
   
6.     height: 100%
   
7.     background-color: #000
   
8. 
   
9.   #loading-box
   
10.     .loading-left-bg
    
11.       @extend .loading-bg
    
12. 
    
13.     .loading-right-bg
    
14.       @extend .loading-bg
    
15.       right: 0
    
16. 
    
17.     .spinner-box
    
18.       position: fixed
    
19.       z-index: 1001
    
20.       display: flex
    
21.       flex-direction: column
    
22.       justify-content: center
    
23.       align-items: center
    
24.       width: 100%
    
25.       height: 100vh
    
26.       
    
27.       /* 初始状态：透明 */
    
28.       opacity: 0
    
29.       transition: opacity 0.5s ease-out 0.1s
    
30.       
    
31.       /* 红白八卦图 */
    
32.       .bagua
    
33.         width: 120px
    
34.         height: 120px
    
35.         position: relative
    
36.         border-radius: 50%
    
37.         background: linear-gradient(to right, #fff 50%, #e74c3c 50%)
    
38.         animation: rotate 3s linear infinite
    
39.         box-shadow: 0 0 20px rgba(231, 76, 60, 0.7)
    
40.         margin-bottom: 40px
    
41.       
    
42.       .bagua::before,
    
43.       .bagua::after
    
44.         content: ''
    
45.         position: absolute
    
46.         border-radius: 50%
    
47.       
    
48.       .bagua::before
    
49.         width: 60px
    
50.         height: 60px
    
51.         top: 0
    
52.         left: 30px
    
53.         background: #e74c3c
    
54.       
    
55.       .bagua::after
    
56.         width: 60px
    
57.         height: 60px
    
58.         bottom: 0
    
59.         left: 30px
    
60.         background: #fff
    
61.       
    
62.       .bagua-inner::before,
    
63.       .bagua-inner::after
    
64.         content: ''
    
65.         position: absolute
    
66.         border-radius: 50%
    
67.         z-index: 1
    
68.       
    
69.       .bagua-inner::before
    
70.         width: 20px
    
71.         height: 20px
    
72.         top: 20px
    
73.         left: 50px
    
74.         background: #fff
    
75.       
    
76.       .bagua-inner::after
    
77.         width: 20px
    
78.         height: 20px
    
79.         bottom: 20px
    
80.         left: 50px
    
81.         background: #e74c3c
    
82. 
    
83.       /* 文字样式 */
    
84.       .loading-word
    
85.         position: relative
    
86.         color: #fff
    
87.         font-size: 18px
    
88.         font-weight: bold
    
89.         text-shadow:
    
90.           0 0 5px #e74c3c,
    
91.           0 0 10px #e74c3c,
    
92.           0 0 15px #e74c3c
    
93.         letter-spacing: 3px
    
94.         text-align: center
    
95.         margin-top: 20px
    
96.         animation: text-glow 2s ease-in-out infinite alternate
    
97. 
    
98.       /* 淡入后的状态 */
    
99.       &.fade-in
    
100.         opacity: 1
     
101. 
     
102.     &.loaded
     
103.       .loading-left-bg
     
104.         transition: all 1s
     
105.         transform: translate(-100%, 0)
     
106. 
     
107.       .loading-right-bg
     
108.         transition: all 1s
     
109.         transform: translate(100%, 0)
     
110. 
     
111.       .spinner-box
     
112.         opacity: 0
     
113.         visibility: hidden
     
114.         transition: opacity 0.5s ease, visibility 0.5s ease
     
115. 
     
116.   @keyframes rotate
     
117.     0%
     
118.       transform: rotate(0deg)
     
119.     100%
     
120.       transform: rotate(360deg)
     
121.   
     
122.   @keyframes text-glow
     
123.     0%
     
124.       text-shadow:
     
125.         0 0 5px #e74c3c,
     
126.         0 0 10px #e74c3c,
     
127.         0 0 15px #e74c3c
     
128.       opacity: 0.8
     
129.     100%
     
130.       text-shadow:
     
131.         0 0 10px #e74c3c,
     
132.         0 0 20px #e74c3c,
     
133.         0 0 30px #e74c3c
     
134.       opacity: 1

复制代码

Komeiji小五

欸不对这玩意是不是应该放技术馆
好像放错位置了（

详细解读：https://blog.komeijiv.cn/posts/ee8eaac/

Komeiji小五

还好我保持理智没去学前端，来几个任务能直接给我熬秃了。
突然想起高中有个从来没摸过电脑的去学了计算机，不知还活着么。
（不是我曲曲他，高考完他让我教他怎么使linux，教了两月完全没会，唯一学会的就是打瓦，我真服了。这货最后还嫌弃我教的不好，真无语）

Ahhaha233

我选择用 svg （
话说阴阳鱼的旋转方向是不是错了🤔