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.左右括号距离发生了变化。。。变宽了。。。不太清楚为啥 猜测是写法的问题

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