AI 摘要

这篇文章讲了如何将underical.cc风格的加载效果应用到Sakurairo主题中。通过修改functions.php文件和添加特定的代码，实现了自定义加载效果。作者对underical的加载效果表现出了极大喜爱，并分享了实现方法。同时指出了一些问题，如与原始主题的冲突和左右括号间距变宽等，暂时未能解决。整体而言，介绍了一种实现加载效果定制的方法，展示了对个人博客主题的自定义追求和热情。

很喜欢underical的加载效果 ，一直想搞到自己的博客里

最后终于摸索出了方法

1.修改

修改functions.php即可

在/wp-content/themes/Sakurairo-master/functions.php

最下面添加下面GPT生成的代码即可

function add_loading_effect() {
    ?>
    <div id="loadingEffect" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background: black;">
        <div class="kultldr" style="color: #ffffff; font-family: Consolas, Menlo, Monaco, monospace; font-weight: 700; font-size: 78px; opacity: 0.8; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);">
        </div>
        <style>
	body {
	background-color: #000000; /* Set the background color to black */
			}
 
.kultldr {
			  color: #ffffff; /* Set the text color to white */
			  font-family: Consolas, Menlo, Monaco, monospace;
			  font-weight: 700;
			  font-size: 78px;
			  opacity: 0.8;
			  position: fixed;
			  top: 50%;
			  left: 50%;
			  transform: translate(-50%, -50%);
			}
 
			.kultldr:before,
			.kultldr:after {
			  color: #ffffff; /* Set the brace color to white */
			}
 
			.kultldr:before {
			  content: "{";
			  display: inline-block;
			  animation: 0.4s ease-in-out infinite alternate pulse;
			}
 
			.kultldr:after {
			  content: "}";
			  display: inline-block;
			  animation: 0.4s ease-in-out 0.3s infinite alternate pulse;
			}
 
			@keyframes pulse {
			  to {
				transform: scale(0.8);
				opacity: 0.5;
			  }
			}
			</style>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function(event) { 
            // Hide the loading effect when the page is fully loaded
            document.getElementById('loadingEffect').style.display = 'none';
        });
    </script>
    <?php
}
add_action('wp_head', 'add_loading_effect');

2.解释

其实很简单 没啥好说的 就是删去了原有的加载效果，然后用DOMC监测资源加载效果

header.php里删除默认的加载效果（在上面一点的地方）

<div id="preload">
    <li data-id="3" class="active">
        <div id="preloader_3"></div>
    </li>
</div>

然后再将上面的粘贴在最下面即可

最后记得用Ctrl+F5强行删除 或者清除后台缓存试试~

3.动效CSS

引入后记得放置<div class="kultldr"></div> 来生效

下面是CSS

<style>
body {
  background-color: #000000; /* Set the background color to black */
}
 
.kultldr {
  color: #ffffff; /* Set the text color to white */
  font-family: Consolas, Menlo, Monaco, monospace;
  font-weight: 700;
  font-size: 78px;
  opacity: 0.8;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
.kultldr:before,
.kultldr:after {
  color: #ffffff; /* Set the brace color to white */
}
 
.kultldr:before {
  content: "{";
  display: inline-block;
  animation: 0.4s ease-in-out infinite alternate pulse;
}
 
.kultldr:after {
  content: "}";
  display: inline-block;
  animation: 0.4s ease-in-out 0.3s infinite alternate pulse;
}
 
@keyframes pulse {
  to {
    transform: scale(0.8);
    opacity: 0.5;
  }
}
</style>

下面是一个简单的应用案例

 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
  background-color: #000000; /* Set the background color to black */
}
 
.kultldr {
  color: #ffffff; /* Set the text color to white */
  font-family: Consolas, Menlo, Monaco, monospace;
  font-weight: 700;
  font-size: 78px;
  opacity: 0.8;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
.kultldr:before,
.kultldr:after {
  color: #ffffff; /* Set the brace color to white */
}
 
.kultldr:before {
  content: "{";
  display: inline-block;
  animation: 0.4s ease-in-out infinite alternate pulse;
}
 
.kultldr:after {
  content: "}";
  display: inline-block;
  animation: 0.4s ease-in-out 0.3s infinite alternate pulse;
}
 
@keyframes pulse {
  to {
    transform: scale(0.8);
    opacity: 0.5;
  }
}
</style>
<body>
<div class="kultldr"></div>
 
</body>
</html>

4.未解决问题

1.和原始主题略有冲突 会闪现。。。

2.左右括号距离发生了变化。。。变宽了。。。不太清楚为啥 猜测是写法的问题

暂时没时间仔细排查~ 先这样吧~

  1. 1.修改
  2. 2.解释
  3. 3.动效CSS
  4. 4.未解决问题