当然我这个是个案例，自己写的原创代码！
使用方法：（下面只提供压缩版）
1，在 <title>标题</title> 网站的标题后面添加样式
压缩版：
<style>@keyframes zbks { from { left: 0; opacity: 1; } to { left: -1000px; opacity: 0; } } @keyframes rbks { from { right: 0; opacity: 1; } to { right: -1000px; opacity: 0; } } @keyframes yanshe { 0% { color: #D41FFF; text-shadow: 0 0 0 #000; } 20% { color: #A0A0A4; text-shadow: 2px 2px 2px #000; } 40% { color: #007F00; text-shadow: 4px 4px 4px #000; } 60% { color: #2A5F00; text-shadow: 6px 6px 6px #000; } 80% { color: #FF1F00; text-shadow: 3px 3px 3px #000; } 100% { color: #800000; text-shadow: 0px 0px 0px #000; } } #kp { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; } #kp #za { position: absolute; width: 50%; height: 100%; background: #000; float: left; } #kp #ra { position: absolute; margin-left: 50%; width: 50%; height: 100%; background: #000; float: left; } .zbks { animation: zbks 3s; animation-fill-mode: both; animation-iteration-count: 1; } .rbks { animation: rbks 3s; animation-fill-mode: both; animation-iteration-count: 1; } .spinner { display: block; width: 1px; height: 1px; border: 60px solid rgba(255, 255, 255, 0.20); border-radius: 60px; border-left-color: transparent; border-right-color: transparent; animation: spin 1s infinite; } @keyframes spin { 0%,100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(720deg) scale(0.2); } }</style>
2，在 <body> 网站的内容后面添加样式
压缩版：
<div id="kp"><div style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000" id="center"><center><canvas id="canvas"></canvas><span class="spinner"></span><h3> </h3><h1 style="color:#FF5;animation:yanshe 3s">正在加载页面...</h1></center></div><div><div id="za"></div><div id="ra"></div></div></div><script>setTimeout(function(){var e=document.getElementById("center");e.style.display="none";var t=document.getElementById("za"),n=document.getElementById("ra");t.className="zbks",n.className="rbks",setTimeout(function(){var e=document.getElementById("kp");e.style.display="none"},2e3)},1e3);</script>
3，至此，你已经完成了呢！快刷新看看是不是达到效果了
版权属于：zgcwkj
本文链接：https://blog.zgcwkj.cn/archives/12.html
转载声明：请注明本文章的标题及内容的出处和声明，谢谢
coolapk前来mo bai
欢迎基安大佬前来参观！！！