很喜欢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.左右括号距离发生了变化。。。变宽了。。。不太清楚为啥 猜测是写法的问题
暂时没时间仔细排查~ 先这样吧~
Comments NOTHING