分类技术栈下的文章

2024-12-27

Typecho 禁止F12 禁止F12的好处防止恶意代码注入：通过禁止F12，网站可以减少黑客或恶意用户通过开发者工具获取网站的敏感信息或注入恶意代码的风险。保护内容版权：禁止F12可以防止用户通过开发者工具下载或复制网站的受版权保护的内容，从而保护知识产权和创作者的权益。防止误操作：有时候用户可能会在浏览器的开发者工具中进行误操作，而禁止F12可以减少这种风险，避免用户对页面结构或代码进行无意的修改或删除。注意事项{callout color="#f0ad4e"}然而需要注意的是，禁止F12并不能完全阻止技术熟练的用户对网站进行修改或获取信息，因此，禁止F12只是增加了一道保护措施，但并不能绝对保证网站的安全和内容的保护。同时，禁用F12也可能对正常用户带来一些不便，例如无法查看网页源代码、调试网页等操作。{/callout}两种方法自行选择方法一<script> function fuckyou(){ window.close(); //关闭当前窗口(防抽) window.location="about:blank"; //将当前窗口跳转置空白页 } function click(e) { if (document.all) { if (event.button==2||event.button==3) { alert("禁止拿代码"); oncontextmenu='return false'; } } if (document.layers) { if (e.which == 3) { oncontextmenu='return false'; } } } if (document.layers) { fuckyou(); document.captureEvents(Event.MOUSEDOWN); } document.onmousedown=click; document.oncontextmenu = new Function("return false;") document.onkeydown =document.onkeyup = document.onkeypress=function(){ if(window.event.keyCode == 123) { fuckyou(); window.event.returnValue=false; return(false); } } </script>方法二<script language="JavaScript"> //禁止页面选择以及鼠标右键 document.οncοntextmenu=function(){return false;}; document.onselectstart=function(){return false;}; let h = window.innerHeight; let w = window.innerWidth; //禁用右键 document.oncontextmenu = function () { return false; }; //禁用开发者工具F12和禁止shift+ctrl+i调起开发者工具 document.onkeydown = function () { if (window.event && window.event.keyCode == 123) { event.keyCode = 0; event.returnValue = false; return false; } if (event.shiftKey && event.ctrlKey && event.keyCode === 73) { event.preventDefault(); return false; } }; </script>{callout color="#f0ad4e"}将上述代码，放在你网站 footer.php 文件的最下面，或者在 head 里面引入该代码。{/callout}

2024年12月27日
22 阅读
0 评论
0 点赞

2024-12-25

在宝塔面板部署雷池WAF(避坑版) 互联网上的攻击和扫描流量非常多，为了保证网站安全，为网站新增WAF防护是必要的！之前有了解过宝塔云WAF ，但需要独立的一台服务器来部署，架构不够灵活，对于个人用户来说成本太高了。得知雷池WAF，基于 Nginx 开发，以反向代理方式接入，部署架构灵活，可以与 WEB 服务部署在同一台服务器（官方不推荐），是一款广受好评的社区WAF 项目！不过在网站管理上，个人用户大多都是通过宝塔面板进行管理，宝塔面板的Nginx默认监听端口为 80 和 443 ，这就导致共存部署时雷池WAF默认无法监听 80 和 443 端口，那怎么办呢？本文将提供在宝塔面板怎样部署雷池WAF以及详细过程，同时帮大家避坑安装雷池WAF过程有可能踩的雷。安装宝塔和配置环境怎样安装宝塔我这里就不多赘述了，自行去宝塔官网安装，根据自己网站情况配置环境，（啰嗦一句安装好宝塔后不用着急安装Docker，后续安装雷池WAF时会帮你安装。）修改Nginx端口避免80和443端口被占用{message type="info" content="先随便创建个站点，然后启用一下ssl证书，再开启个强制HTTPS（避坑，下文会用到）"/}在宝塔面板，网站中找到对应的站点，单击右侧的设置！切换到配置文件，修改监听端口为其他非占用端口，这里我把 80 端口改为 88 端口， 443 端口改为 444 端口（根据个人修改）单击保存即可。图中的 if 判断后面的端口是强制 HTTPS 的判断端口,(一定要改，不然反复重定向)如果你没有开启强制 HTTPS 就没有这个 if 判断代码，就不需要改。进入 /www/server/panel/vhost/nginx/ 目录，分别编辑 0.default.conf 和 phpfpm_status.conf 文件，将默认监听端口修改为其他非占用端口（和上面配置相似分别把80端口和443端口进行修改，必须把这两个文件所有上述端口进行修改），最后保存退出。配置完成后重启 Nginx ，如果可以正常重启则说明配置正确。后期新增的网站域名一定要写 a.com:xx ， xx 写你的非标端口，HTTPS端口也要改，否则默认使用 80 端口会出现各种意想不到的 BUG ！（记住要在宝塔防火墙和服务器防火墙添加端口规则，放行其刚才修改的端口）安装雷池WAF前往雷池WAF官网复制对应系统脚本在SSH终端执行安装。自动安装命令（推荐）使用 root 权限执行以下命令，跟随命令提示输入相关信息，3分钟即可完成自动安装。bash -c "$(curl -fsSLk https://waf-ce.chaitin.cn/release/latest/setup.sh)"在宝塔面板左侧菜单选择终端，执行已复制的命令进行安装雷池WAF，提示安装 Docker 时确定即可。雷池WAF安装目录选择默认的（如果自定义安装路径，更新/卸载是个大麻烦）雷池安装成功以后，你可以打开浏览器访问 http://你的ip:9443 来使用雷池控制台。{message type="warning" content="注意对9443的端口放行"/}然后会提示你绑定一个TOTP验证软件，这里推荐使用腾讯身份验证器绑定（我没有提示绑定软件🤷‍♂️这里还是要讲述一下）{callout color="#f0ad4e"}请注意：这里有个坑，雷池的按钮有些在手机端单击无效，需要长按，长按即可解决，腾讯身份验证器TOTP绑定需要扫码，你可以用俩设备或者截图后用QR扫码提取一下验证代码验证，这里不再赘述。{/callout}雷池WAF添加站点网上有很多教程，这里我就不赘述了！这里主要说一下这个上游怎么请求，配置错误会出现502错误。选择雷池WAF和宝塔通讯用 HTTP 协议就写HTTP协议你写的非标端口，我的示例是 88端口，一定要注意， HTTP 协议的上游写 http://127.0.0.1:88 注意协议和端口。选择雷池WAF和宝塔通讯用 HTTPS 协议就写HTTPS协议你写的非标端口，我的示例是 444 端口，一定要注意， HTTPS 协议的上游写 https://127.0.0.1:444 注意协议和端口。如果你都按照上面的教程操作，是不会出现端口被占用情况的，请自行排查问题关键。目前发现如果已经部署了站点，雷池WAF可能会出现莫名其妙的占用现象，目前暂时没发现有解决方案，只能重装雷池WAF安装防护、升级等... 雷池WAF 官网均有教程，请自行查阅，这里不再过多赘述。解决宝塔无法获取访客真实IP问题在雷池防护站点，全局配置中把源IP获取方式更换为从源IP获取方式从 HTTP-Header 中获取，并把 HTTP-Header 设置为 X-Forwarded-For 并开启 {x} 清空并重写 X-Forwarded-For 在Nginx配置中的HTTP代码块增加一下代码 set_real_ip_from 0.0.0.0/0; real_ip_header X-Forwarded-For; real_ip_recursive on; #使用CDN时考虑，不然会无法获取访客IP只能获取CDN的IP{callout color="#f0ad4e"}本站已接入长亭雷池WAF 请勿恶意 DDoS 本站！{/callout}

2024年12月25日
28 阅读
0 评论
2 点赞

2024-12-25

2024年12月25日
12 阅读
0 评论
1 点赞

2024-12-24

【实践】Typecho Joe主题更换404页面模板想必大家的博客或者网站，都会有相对应的404页面，不过有时候那些模板往往跟不上审美就想换掉🤷‍♂️，我用的Joe主题404页面亦是如此，虽然样式很好看但是没有实际用途，所以说毫无意义。我打开源文件看到了一串代码🤦‍♂️不是说无用简直就是无用，为了展现一张图片搞那么多代码太浪费咯！今天 UP主就为大家基于Joe主题魔改一款简洁大方的404页面。（网上虽然有很多实用的404页面源码，大家都是直接替换成 404.php 文件并不适配Joe主题）效果展示https://www.ailmu.cn/404.php404页面创建首先我们创建一个单独的页面来作为404页面，从 \usr\themes\Joe 主题根目录复制出一份 page.php 文件，把文件中的以下代码删掉（注意删除的内容，包括文章模块和评论模块这里不需要用到）隐藏内容，请前往内页查看详情删除后的位置，可添加你需要的404页面内容，这里不再赘述因为每个人的想法不一样，不懂的可参考一下，下面的全量代码。{callout color="#f0ad4e"}把刚才复制的 page.php 文件重命名为 404.php 然后把之前的404文件删除，重新上传新的404文件到Joe主题根目录，即可。{/callout}404页面全量代码为了演示， UP主把自己魔改的404页面全量代码发了出来，大家自行参考。（我在网上随便找的代码，有点乱懒得整理🤷‍♂️）<!DOCTYPE html> <html lang="zh-CN"> <head> <?php $this->need('public/include.php'); ?> <?php if ($this->options->JPrismTheme) : ?> <link href="<?php $this->options->JPrismTheme() ?>" rel="stylesheet"> <?php else : ?> <link href="<?php _getAssets('assets/lib/prism/prism.min.css'); ?>" rel="stylesheet"> <?php endif; ?> <script src="<?php _getAssets('assets/lib/clipboard@2.0.11/clipboard.min.js'); ?>"></script> <script src="<?php _getAssets('assets/lib/prism/prism.min.js'); ?>"></script> <script src="<?php _getAssets('assets/js/joe.post_page.min.js'); ?>"></script> <style> body{ margin:0;padding:0; font-family: Helvetica,Arial,"PingFang SC","Microsoft YaHei","WenQuanYi Micro Hei","tohoma,sans-serif"; } a, button.submit { color:#6E7173; text-decoration:none; -webkit-transition:all .1s ease-in; -moz-transition:all .1s ease-in; -o-transition:all .1s ease-in; transition:all .1s ease-in; } a:hover, a:active { color:#6E7173; } .body404{ position: absolute; height: 100%; width: 100%; background:#fff; background-size: auto 100%; text-shadow:1px 1px 0 #fff; } .body-about .body404{ background:#fff; } .site-name404 { margin: 0 auto; text-align: center; letter-spacing: 2px; font: normal 150px/1 “Helvetica Neue”, Helvetica, Arial; color:#444; } .site-name404 h1{ margin: 0 0 10px; font-size:50px; line-height:1.2; } .title404 span{ font-size: 15px; width: 2px; } .site-name404 i { font-style: normal; } .title404 p{ font-size: 20px; line-height:1.5; margin:0; color:#444; } .info404{ position: absolute; top: 30%; text-align: center; width: 100%; margin-top: -160px; } .body-about .info404{ margin-top: -180px; } #footer404{ margin-top:30px; font-size:10px; } .index404 { margin-top: 24px; display: inline-block; white-space: nowrap; cursor: pointer; background: #444; letter-spacing: 1px; font-size: 14px; -moz-user-select: -moz-none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; text-shadow: none; border: 1px solid #ccc; line-height: 36px; text-align: center; height: 36px; padding: 0 25px; border-radius: 16px; -webkit-transition-duration: 400ms; transition-duration: 400ms; background-color: #fff; color: #999; } .index404:hover{ color: #F77B83; border-color: #F77B83; outline-style: none; } .icon-about{ padding: 10px 0 25px; } .icon-about a{ font-size: 20px; margin: 5px; color: #fff; background-color: #000; border-radius: 100%; padding: 6px; } </style> </head> <body> <div id="Joe"> <?php $this->need('public/header.php'); ?> <div class="joe_container"> <div class="joe_main"> <div class="body404"> <div class="info404"> <header id="header404" class="clearfix"> <div class="site-name404"><i>404</i> </div> </header> <section> <div class="title404"> <p>哎呀！找不到页面了！</p> <br> <div class="widget widget_ui_textads"><img src="https://www.yuanxiapi.cn/api/img/" width="50%" style="border-radius: 20px;"></div> </div><a href="/" class="index404">返回首页</a> <a href="javascript:location.reload();"class="index404">点击刷新</a> <br> </section> </div> </div> </div> <?php $this->need('public/aside.php'); ?> </div> <?php $this->need('public/footer.php'); ?> </div> </body> </html>

2024年12月24日
19 阅读
0 评论
2 点赞

2024-12-24

用 AI 为 Typecho 博客文章生成摘要！这不本站已经上线有一段时间了，一直没有好好整理文章摘要内容，我看到许多网站都在用 AI 文章摘要，于是我在网上找了很多教程最后都木有好的效果，最近发现了两款基于 Typecho 开发的AI文章摘要插件，今天整理一下并发一下详细教程。效果展示Github 项目地址AISummary： https://github.com/idealclover/AISummary-Typecho AIContentSummary： https://github.com/Rockytkg/AIContentSummaryAISummary 使用教程原作者 AISummary 作者地址插件代码好像写死了，只能用 MoonShot Kimi Chat 。不过Kimi处理长文本能力也确实不错，而且注册送了15元 💰 的额度。（我也是用了一段时间，直到后面发现了智谱清言的 GLM-4-Flash 模型是完全免费的。）下载安装并启用插件，这里 UP主不再赘述，说一下设置：{callout color="#f0ad4e"}模型名：moonshot-v1-8k密钥：sk-Pgriw2zYbG4QXljPszkxdinwlSC6*API地址：https://api.moonshot.cn{/callout}MoonShot Kimi Chat API KEY 注册地址： https://platform.moonshot.cn/ 其他设置自行调整，以适配于您自己的主题模板。AISummary 优化之前提到原作者插件码写死了，只能用 MoonShot Kimi Chat 的 /v1/chat/completions API 接口。稍微修改下，让其适用更多的 AI。修改方法如下：打开 /usr/plugins/AISummary/Plugin.php 文件找到大约 239 行。 // $apiUrl = rtrim($options->apiUrl, '/') . '/v1/chat/completions'; 原代码，注释掉，然后添加下一行代码 $apiUrl = $options->apiUrl;优化后的插件设置{callout color="#f0ad4e"}kimi Chat模型名：moonshot-v1-8k密钥：sk-Pgriw2zYbG4QXljPszkxdinwlSC6hHon*API地址：https://api.moonshot.cn/v1/chat/completions智谱清言模型名：glm-4-flash密钥：c80bd29ca5aa562df18967561af0d9e0.3whX*API地址：https://open.bigmodel.cn/api/paas/v4/chat/completions{/callout}智谱清言BigModel 智谱AI大模型开放平台链接： https://maas.aminer.cn/ GLM-4-Flash 免费调用：智谱AI首个免费API，零成本调用大模型，支持128K上下文。（值得推荐）{callout color="#f0ad4e"}其他模型请自行去测试，我这里提到的主要是能麻烦白嫖的😏，理论上支持所有GPT类型的Chat，有发现新的、好用的，欢迎评论区留言哦！{/callout}

2024年12月24日
20 阅读
0 评论
0 点赞

2024-12-23

Typecho Joe主题 RSS方式呈现“新闻早报”（扩展篇）前段时间写了一篇关于Typecho Joe 主题，怎么添加新闻早报页面的文章，详细文章请看：https://www.ailmu.cn/technique/11.html今天 UP主为大家带来了它的扩展功能，设置首页文章流，为了使新闻看起来更加自然方便，我们在首页添加新闻文章，使其看起来和文章浑然一体，此方法仅限Joe 7.x 主题。效果展示学习姿势修改Joe主题根目录 index.php 文件， Ctrl+F 查找如下代码：<div class="joe_index__list" data-wow="<?php $this->options->JList_Animate() ?>">在此代码上方位置粘贴如下代码： <li class="joe_list__item wow default" style="visibility: visible;"> <div class="line"> </div> <a href="/news.html" class="thumbnail" title="艾霂's Blog - 新闻导读" rel="noopener noreferrer"> <img width="100%" height="100%" class=" lazyloaded" src="/usr/themes/Joe/assets/img/news.gif" data-src="/usr/themes/Joe/assets/img/news.gif" alt="艾霂's Blog - 新闻导读"> <time> <?php echo date('Y-m-d'); ?> </time> </a> <div class="information"> <a href="/news.html" class="title" title="艾霂's Blog - 新闻导读" rel="noopener noreferrer"> <span class="badge" style="display: inline-block; background-image: -webkit-linear-gradient(0deg,#a9ff00 0%,#007b14 100%);"> 最新 </span> 艾霂's Blog - 新闻导读 </a> <a class="abstract" href="/news.html" title="新闻摘要" rel="noopener noreferrer"> 艾霂's Blog - 新闻导读，为保证每位用户的阅读体验感，采用中国新闻网即时新闻RSS源，为广大用户带来最好的体验！ </a> <div class="meta"> <ul class="items"> <li> <?php echo date('Y年m月d日'); ?> </li> <li> 新闻导读 </li> </ul> <div class="last" style="display: flex"> <span class="link"> <svg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='15' height='15'><path d='M512.2 564.743a76.818 76.818 0 0 1-30.973-6.508L108.224 393.877c-26.105-11.508-42.56-35.755-42.927-63.272-.384-27.44 15.356-52.053 41.042-64.232l373.004-176.74c20.591-9.737 45.16-9.755 65.75.017L917.68 266.39c25.668 12.188 41.39 36.792 41.024 64.231-.384 27.5-16.821 51.73-42.908 63.237l-372.57 164.377a77.18 77.18 0 0 1-31.025 6.508zM139.843 329.592l370.213 163.241c1.291.56 3.018.567 4.345-.009l369.758-163.128-369.706-175.464v-.01c-1.326-.628-3.158-.636-4.502 0l-370.108 175.37zm748.015 1.858h.175-.175zM512.376 941.674c-10.348 0-20.8-2.32-30.537-6.997L121.05 778.624c-18.113-7.834-26.454-28.87-18.62-46.983 7.835-18.112 28.862-26.488 46.993-18.61l362.08 156.629 345.26-156.366c17.939-8.166 39.14-.253 47.324 17.746 8.166 17.964.227 39.157-17.729 47.324l-344.51 156.61c-9.196 4.449-19.281 6.7-29.471 6.7z' fill='#444'></path><path d='M871.563 515.449L511.81 671.775 152.358 515.787v73.578a34.248 34.248 0 0 0 20.76 31.48l301.518 129.19c11.806 5.703 24.499 8.546 37.175 8.546s25.367-2.843 37.174-8.546L850.82 620.534a34.248 34.248 0 0 0 20.744-31.474V515.45z' fill='#ff6a18'></path></svg> 新闻导读 </span> </div> </div> </div> </li>{callout color="#f0ad4e"}记得修改代码中，相对应的页面链接地址。要不然全部都是我的链接喽🥱{/callout}注意事项修改前，一定记得备份！图片链接最好更换成自己的图片链接！跳转错误记得修改成自己的内页链接，你可能需要将 /news.html 改成 /index.php/news.html （网站开启伪静态的可省略...）

2024年12月23日
14 阅读
0 评论
2 点赞

2024-12-22

Typecho Joe主题 RSS方式呈现“新闻早报”（功能可扩展）前段时间 UP主在网上冲浪，无意中找到了一篇关于《简单而完整的 PHP RSS 阅读器》的文章。经过小小的实验之后大为惊喜！这短短的20行代码也正好是我最近一直在找的。因为看到别人的博客都有每天60秒读懂世界新闻早报功能，感觉还是挺新鲜的😏，于是我把找到的代码在Joe主题上进行了测试，效果非常不错！于是决定分享出来给大家测试，此方法使用了简单的RSS引用方式，不必再受api资源的限制，而且可扩展性也非常强。{callout color="#f0ad4e"}注意：感觉效果不错的话，转载请注明出处哦！（本人支持转载，但一定要带上本文链接）{/callout}为何选用 RSS 方式更加比 api 具有优势呢？rss订阅源丰富，更新节奏快，api更新不稳定，我之前的方法就经常中午才更新，这还能叫早报么api大部分都有调用次数显示，比如前段时间看到的一篇文章，Joe主题首页显示新闻早报API，可每日更新（功能可扩展）中使用的ALAPI，每日仅1000次调用次数rss的源不仅仅是新闻，更加丰富的订阅来源，而api也就那几种了。效果图预览这里页面名可自定义，虽然叫新闻早报，当然也可以改成其他的🧑‍💻 新闻页面创建首先我们创建一个单独的页面来作为新闻页，从 \usr\themes\Joe 主题根目录复制出一份 page.php 文件，并在头部添加以下代码。（这里把 page.php 文件重命名为 news.php 重新上传到Joe主题根目录）<?php /** * 新闻导读 * * @package custom * **/ ?>在你复制的 page.php 文件中，寻找到以下代码：<?php $this->need('public/article.php'); ?> <?php $this->need('public/handle.php'); ?>在上述两行代码之间，添加以下代码：<?php $rss = simplexml_load_file('https://www.chinanews.com.cn/rss/scroll-news.xml'); $title = $rss->channel->title; ?> <title><?php echo $title; ?></title> <h1 style="text-align:center;"> 艾霂's Blog - 新闻导读 </h1> <?php echo "<article class='joe_detail__article'><ol>"; foreach ($rss->channel->item as $item) { echo "<li>"; echo "<h6><a style='color: var(--minor); display: block; margin: 10px;' target='_blank' href='" . $item->link . "'>" . $item->title . "</a></h6>"; echo "<div>" . $item->description . "</div><br>"; echo "</li>"; } echo "</ol></article>"; ?> <p style="text-align:right;"> 内容来源：<?php echo $title; ?><br> Made by <a href="/" target="_blank">艾霂's Blog</a> </p>其中第二行就是我们选择的rss订阅地址，这里 UP主用的是中国新闻网 – 即时新闻，当然你也可以换成别的，比如文章最后推荐的几个源都非常不错，你也可以自行百度。在后台新建页面，模板选择新闻导读，地址栏可以填写 news 当然自己diy其他链接也是可以的，然后发布查看效果。我的新闻导读页面：艾霂's Blog - 新闻导读欢迎来踩！如果感觉标题多余，可以删除代码中的<h1 style="text-align:center;"> 艾霂's Blog - 新闻导读 </h1>或者<?php $this->need('public/batten2.php'); ?>这里我没做删除，我感觉不影响哈哈哈哈...RSS新闻源推荐如果你还不清楚去哪找RSS源 https://www.zhihu.com/question/19580096如果你想找更多的源 https://docs.rsshub.app/{dotted startColor="#ff6c6c" endColor="#1989fa"/}奇客Solidot https://www.solidot.org/index.rss36氪 https://36kr.com/feed月光博客 https://www.williamlong.info/rss.xml中国新闻网 https://www.chinanews.com.cn/rss/index.shtml

2024年12月22日
31 阅读
0 评论
4 点赞

2024-12-22

给网站添加 Loading 加载动画给网站添加上Loading动画，可以效防止部分浏览器打开网页后，因为有些静态资源还没有加载完毕导致的闪屏、白屏、花屏、错误排版等BUG！如何给网页添加加载动画原理分析简单的来说，就是提前准备好一个加载动画的效果在页面上，利用 JS 判断页面是否加载完成，加载完成后隐藏或者移除动画即可。🧑‍💻实现方法HTML部分 <div id="loading-box"> <div class="loading-left-bg"></div> <div class="loading-right-bg"></div> <div class="spinner-box"> <div class="loader"> <div class="inner one"></div> <div class="inner two"></div> <div class="inner three"></div> </div> <div class="loading-word"> <p class="loading-title" id="loading-title">Yecssの主页</p> <span id="loading-text">Loading...</span> </div> </div> </div> CSS部分#loading-box .loading-left-bg, #loading-box .loading-right-bg { position: fixed; z-index: 999998; width: 50%; height: 100%; background-color: rgb(81 81 81 / 80%); transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01); backdrop-filter: blur(10px); } #loading-box .loading-right-bg { right: 0; } #loading-box > .spinner-box { position: fixed; z-index: 999999; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; } #loading-box .spinner-box .loading-word { position: absolute; color: #ffffff; font-size: 0.95rem; transform: translateY(64px); text-align: center; } p.loading-title { font-size: 1.25rem; margin: 20px 10px 4px 10px; } #loading-box .spinner-box .configure-core { width: 100%; height: 100%; background-color: #37474f; } div.loaded div.loading-left-bg { transform: translate(-100%, 0); } div.loaded div.loading-right-bg { transform: translate(100%, 0); } div.loaded div.spinner-box { display: none !important; } .loader { position: absolute; top: calc(50% - 32px); left: calc(50% - 32px); width: 64px; height: 64px; border-radius: 50%; perspective: 800px; transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01); } .inner { position: absolute; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; } .inner.one { left: 0%; top: 0%; animation: rotate-one 1s linear infinite; border-bottom: 3px solid #efeffa; } .inner.two { right: 0%; top: 0%; animation: rotate-two 1s linear infinite; border-right: 3px solid #efeffa; } .inner.three { right: 0%; bottom: 0%; animation: rotate-three 1s linear infinite; border-top: 3px solid #efeffa; } @keyframes rotate-one { 0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } } @keyframes rotate-two { 0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); } 100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } } @keyframes rotate-three { 0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); } }JS部分方法一//加载完成后执行 window.addEventListener( 'load', function () { //载入动画 $('#loading-box').attr('class', 'loaded') $('#bg').css( 'cssText', 'transform: scale(1);filter: blur(0px);transition: ease 1.5s;' ) $('.cover').css('cssText', 'opacity: 1;transition: ease 1.5s;') $('#section').css( 'cssText', 'transform: scale(1) !important;opacity: 1 !important;filter: blur(0px) !important' ) }, false )方法二<script> // 获取动画 let loader = document.querySelector(".spinner"); // 加载完成事件 window.onload = function () { // 加载完成，隐藏动画，显示内容 loader.style.display = "none"; } </script>展示效果动态效果看这里： Loading 这里给大家推荐一个样式网站： https://uiverse.io/loaders 里面的加载动画样式非常丰富，大家可以按照我的思路进行适当的修改。

2024年12月22日
13 阅读
0 评论
1 点赞