设为首页收藏本站喵玉殿官方微博

 找回密码
 少女注册中
搜索
喵玉殿论坛 · 喵玉汉化组»喵玉殿 › ◣喵玉の後宮◥ › 喵玉技术馆 › 神工大成哈哈哈哈（欸不对这玩意是不是应该放技术馆） ...
返回列表 发新帖
查看: 24|回复: 3

[编程算法] 神工大成哈哈哈哈（欸不对这玩意是不是应该放技术馆）

[复制链接]
Komeiji小五
发表于 8 小时前 | 显示全部楼层 |阅读模式
本帖最后由 Komeiji小五 于 2026-2-4 04:43 编辑

写了十五天的加载动画，终于成了。
先展示
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 少女祈祷中...

  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.     }

  37.     preloader.initLoading()

  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.     }

  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.     }

  119.     // 启动加载检测
  120.     startLoading().catch((error) => {
  121.       console.error('加载检测出错:', error)
  122.       // 如果出错，至少显示2秒
  123.       setTimeout(preloader.endLoading, 2000)
  124.     })

  126.     // 超时保护：8秒后强制结束
  127.     setTimeout(preloader.endLoading, 8000)

  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

  9.   #loading-box
  10.     .loading-left-bg
  11.       @extend .loading-bg

  13.     .loading-right-bg
  14.       @extend .loading-bg
  15.       right: 0

  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

  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

  98.       /* 淡入后的状态 */
  99.       &.fade-in
  100.         opacity: 1

  102.     &.loaded
  103.       .loading-left-bg
  104.         transition: all 1s
  105.         transform: translate(-100%, 0)

  107.       .loading-right-bg
  108.         transition: all 1s
  109.         transform: translate(100%, 0)

  111.       .spinner-box
  112.         opacity: 0
  113.         visibility: hidden
  114.         transition: opacity 0.5s ease, visibility 0.5s ease

  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小五
 楼主| 发表于 7 小时前 | 显示全部楼层
本帖最后由 Komeiji小五 于 2026-2-4 04:38 编辑

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

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

使用道具 举报

Komeiji小五
 楼主| 发表于 7 小时前 | 显示全部楼层
本帖最后由 Komeiji小五 于 2026-2-4 03:50 编辑

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

使用道具 举报

Ahhaha233
发表于 2 小时前 | 显示全部楼层
本帖最后由 Ahhaha233 于 2026-2-4 10:44 编辑

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

摸鱼写了一个
跟楼主那版的主要区别是眼睛没有使用额外元素，而是使用径向渐变来实现
       
                       
       





回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 少女注册中

本版积分规则

合作与事务联系|无图版|手机版|小黑屋|喵玉殿

GMT+8, 2026-2-4 11:15

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表