个人网站特效JS,放到html中即可!

123 次浏览次阅读
没有评论

都是来自别人家的CDN加速JS包,建议放到网站的footer.html模板文件里,或者header中也行。

每个板块都可单独开启关闭,注解掉就行了,还可以部分选择性使用,每个模块的备注的很清楚。

个人网站特效JS,放到html中即可!
<!--鼠标特效-->
<!--全页特效开始-->
<script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mobile-detect.js"></script>
<script type="text/javascript">
    // 设备检测
    var md = new MobileDetect(window.navigator.userAgent);
 
    // PC生效,手机/平板不生效
    // md.mobile(); md.phone(); 
    if(!md.phone()){
        if(!md.tablet()){
            // 雪花
            // $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/xiaxue.js");
 
            // 樱花
            // $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/yinghua.js");
 
            // 小烟花特效
            // $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mouse-click.js");
 
            // 大烟花特效
            // $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/mouse-click-02/mouse-canvas.js");
            // document.write('<style>#mouse-canvas {z-index:217483647; pointer-events: none;  box-sizing: border-box !important; display: block !important; position: fixed !important; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100vh;}</style>')
 

            // 鼠标移动的仙女棒特效。
            $.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/fairyDustCursor.min.js");
        }   
    }
</script>
<!--全页特效结束-->

<!--鼠标指针特效2 开始-->
<style type="text/css">
.main-content img,body{cursor:url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/Arrow.cur),auto}.actions>div,.expand-done,.main-content figure>figcaption div,.navbar-above .navbar-nav .item,.navbar-searchicon,.navbar-slideicon,.photos .picture-details,.widget .ad-tag .click-close,a,button{cursor:url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/Hand.cur),auto}blockquote,code,h1,h2,h3,h4,h5,h6,hr,input[type=text],li,p,td,textarea,th{cursor:url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/IBeam.cur),auto}
</style>
<!--鼠标指针特效2 结束-->

<!--网站输入效果开始-->
<script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/input-with-fire.js"></script>
<!--网站输入效果-->

<!--背景虚化-滚动模糊-->
<script>
window.addEventListener("scroll", function (e) {
  if (window.scrollY > window.innerHeight * 0.3) {
    document.querySelector("#content").classList.add("scrolled");
  } else {
    document.querySelector("#content").classList.remove("scrolled");
  }
});</script>
<style>
#content.scrolled::before, #content.scrolled::after {
  filter: blur(6px); /*数字越大虚化越明显*/
  transform: scale(1.02); /*数字越大背景放大越明显*/
}
#content::before, #content::after {
  transition: filter .3s ease, transform .3s ease !important;
  filter: blur(0px);
  transform: scale(1.02);
}
</style>
<!--背景虚化-滚动模糊-->

正文完
 0
评论(没有评论)

真人堂

一言一句话
-「
最新文章
Qwen3-32B通过Clawdbot直连Web网关时如何支持WebSocket心跳保活?

Qwen3-32B通过Clawdbot直连Web网关时如何支持WebSocket心跳保活?

Qwen3-32B通过Clawdbot直连Web网关时如何支持WebSocket心跳保活? 你有没有遇到过这样...
Qwen3-32B部署教程里Clawdbot网关支持模型版本灰度发布与AB测试的操作流程是什么?

Qwen3-32B部署教程里Clawdbot网关支持模型版本灰度发布与AB测试的操作流程是什么?

Qwen3-32B部署教程:Clawdbot网关支持模型版本灰度发布与AB测试的操作流程 Qwen3-32B作...
ClawdBot政务应用中公文格式保持、政策术语库与多级审校流程集成该如何实现?

ClawdBot政务应用中公文格式保持、政策术语库与多级审校流程集成该如何实现?

ClawdBot政务应用中公文格式保持、政策术语库与多级审校流程集成该如何实现? 在政务办公数字化转型的浪潮中...
Clawdbot+Qwen3-32B惊艳效果里支持工具调用Tool Calling的真实API集成案例如何落地?

Clawdbot+Qwen3-32B惊艳效果里支持工具调用Tool Calling的真实API集成案例如何落地?

Clawdbot+Qwen3-32B惊艳效果里支持工具调用Tool Calling的真实API集成案例如何落地...
ClawdBot测试用例编写pytest脚本自动化验证多语言翻译正确性的方法有哪些?

ClawdBot测试用例编写pytest脚本自动化验证多语言翻译正确性的方法有哪些?

ClawdBot测试用例编写pytest脚本自动化验证多语言翻译正确性的方法有哪些? 在ClawdBot与Mo...
Clawdbot+Qwen3-32B实战案例如何构建自主可控的Web大模型对话系统?

Clawdbot+Qwen3-32B实战案例如何构建自主可控的Web大模型对话系统?

Clawdbot+Qwen3-32B实战案例:如何构建自主可控的Web大模型对话系统? 在AI落地越来越快的今...
Clawdbot生产环境部署中Qwen3:32B代理网关的Token安全策略与访问审计配置有哪些要点?

Clawdbot生产环境部署中Qwen3:32B代理网关的Token安全策略与访问审计配置有哪些要点?

Clawdbot生产环境部署中Qwen3:32B代理网关的Token安全策略与访问审计配置有哪些要点? 在Cl...
Qwen3-32B开源大模型部署时Clawdbot支持OpenTelemetry分布式追踪配置该如何开启?

Qwen3-32B开源大模型部署时Clawdbot支持OpenTelemetry分布式追踪配置该如何开启?

Qwen3-32B开源大模型部署时Clawdbot支持OpenTelemetry分布式追踪配置该如何开启? Q...
ClawdBot监控集成使用Prometheus+Grafana监控vLLM GPU利用率与QPS的效果如何?

ClawdBot监控集成使用Prometheus+Grafana监控vLLM GPU利用率与QPS的效果如何?

ClawdBot监控集成:Prometheus+Grafana监控vLLM GPU利用率与QPS的效果如何? ...
Clawdbot+Qwen3:32B多场景落地在教育问答、技术文档助手、内部客服中的应用如何?

Clawdbot+Qwen3:32B多场景落地在教育问答、技术文档助手、内部客服中的应用如何?

Clawdbot+Qwen3:32B多场景落地在教育问答、技术文档助手、内部客服中的应用如何? 在AI落地越来...
Clawdbot+Qwen3:32B部署教程中Web网关SSL双向认证安全加固的配置方法是什么?

Clawdbot+Qwen3:32B部署教程中Web网关SSL双向认证安全加固的配置方法是什么?

Clawdbot+Qwen3:32B部署教程:Web网关SSL双向认证安全加固配置方法详解 在本地部署Claw...