修改Sakurairo主题默认的加载效果 / 应用underical.cc加载效果

很喜欢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>

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bouncing Braces Effect by Dos7t3r | www.blog.iambzy.com</title>
<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>
</head>
<body>
<div class="kultldr"></div>

</body>
<!-- by Dos7t3r | www.blog.iambzy.com -->
</html>