每天一个脱发小技巧

此文章是博主本人一点一滴积累的小技巧哦！觉得有用的话请留步！您的打赏是我持续学习的动力，后期会持续更新分享中。。。

HTML网页加密访问

通过在 Node.js 环境中运行加密脚本，能够加密需要保护的 HTML 内容，然后将其安全地嵌入到网页中。用户只有在输入正确的密码时才能看到解密后的内容。

安装 `crypto-js` 包

在项目根目录下运行以下命令来安装 crypto-js：

1	npm install crypto-js

创建一个 Node.js 脚本

在项目的根目录下创建 encrypt.js 文件，并将以下代码粘贴到文件中：

const CryptoJS = require('crypto-js');
// 需要加密的HTML内容
const content = 
`<p>想偷看我的小秘密，你已被全程监控！！！</p>
<p>记忆碎片整理中。。。</p>
<p>年代太久远，让我好好回忆一下~</p>
`;
const password = '123321'; // 设置访问密码
// 加密内容
const encryptedContent = CryptoJS.AES.encrypt(content, password).toString();
// 返回加密内容
console.log('Encrypted Content: ', encryptedContent);

运行加密脚本

打开终端或命令提示符，导航到包含 encrypt.js 文件的目录，然后运行以下命令：

1	node encrypt.js

获取加密后的内容：

Encrypted Content: U2FsdGVkX19Tx9hbEDIkM69gvFooFkwV7aW34fD2iVj1gEpkg6IuGJptFzCuv5lyJ6Yk6gGZfFszTEYj9ikBUv5Cz1/VIDLt8GOHjN8AHqX0lnPD9HrfpUMV5G+yzjKINQkfO/NdvEPH06H/UMiWPvxzNot/uBEpKcBlwLjtEC1Rp7EolpjAO6t2QW4C0wGJZTXmXcG7x4K6P6SyDN39SkRInRjxlOcYFzyM83ndVm4DBXXDs5fg5RQQytC9axsp

在HTML中展示加密内容

代码示例如下，可根据自己的网页情况作相应调整：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Secure Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            text-align: center;
            padding-top: 100px;
        }
        #content {
            display: none;
        }
    </style>
</head>
<body>

	<div id="password-form">
		<h2>请输入访问密码</h2>
		<input type="password" id="password" placeholder="此内容受保护">
		<button id="submit-button" onclick="decryptContent()">提交</button>
		<div id="error-message" style="color: red; display: none;float: right;"></div>
	</div>
	<div id="content">
		<!-- 加密内容将被解密后显示在这里 -->
	</div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
    <script>
	const encryptedContent = 'U2FsdGVkX19Tx9hbEDIkM69gvFooFkwV7aW34fD2iVj1gEpkg6IuGJptFzCuv5lyJ6Yk6gGZfFszTEYj9ikBUv5Cz1/VIDLt8GOHjN8AHqX0lnPD9HrfpUMV5G+yzjKINQkfO/NdvEPH06H/UMiWPvxzNot/uBEpKcBlwLjtEC1Rp7EolpjAO6t2QW4C0wGJZTXmXcG7x4K6P6SyDN39SkRInRjxlOcYFzyM83ndVm4DBXXDs5fg5RQQytC9axsp' // 粘贴加密的内容
		// 监听输入框的回车键事件
        document.getElementById('password').addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault(); // 阻止默认的表单提交行为
				document.getElementById('submit-button').focus(); // 将焦点移至提交按钮
            }
        });

		function decryptContent() {
			const password = document.getElementById('password').value;
			const errMessageElement = document.getElementById('error-message');
			if (!password) {
				errMessageElement.style.display = 'block';
				errMessageElement.innerText = '密码不能为空';
				setTimeout(() => {
					errMessageElement.style.display = 'none';
				}, 3000);
				return;
			}
			try {
				const bytes = CryptoJS.AES.decrypt(encryptedContent, password);
				const decryptedContent = bytes.toString(CryptoJS.enc.Utf8);

				if (decryptedContent) {
					document.getElementById('password-form').style.display = 'none';
					document.getElementById('content').innerHTML = decryptedContent;
					document.getElementById('content').style.display = 'block';
				} else {
					errMessageElement.style.display = 'block';
					errMessageElement.innerText = '密码错误';
					setTimeout(() => {
						errMessageElement.style.display = 'none';
					}, 3000);
				}
			} catch (e) {
				errMessageElement.style.display = 'block';
				errMessageElement.innerText = '密码错误';
				setTimeout(() => {
					errMessageElement.style.display = 'none';
				}, 3000);
			}
		}
	</script>
</body>
</html>

安全性

加密方法 ： crypto-js 使用的是 AES 加密算法，这是一种对称加密算法，安全性较高。
内容加密 ：通过将内容加密后再传输，避免了直接在 HTML 文件中暴露敏感信息。
前端解密 ：虽然加密内容不会直接暴露，但前端仍然存在安全隐患。高级别的安全场景建议使用后端进行加密和解密。
复杂性 ：相比于简单的密码验证，这种方法更适合保护页面内容不被简单地查看。

如何使谷歌引擎

如何不让 google.com 跳转到 google.com.hk ？

自从google的服务器搬离中国大陆后，大陆地区用户用 google 服务时会自动跳转到香港的 http://google.com.hk ，有关键字过滤而且偶尔不是很稳定，这对我们的生活工作都造成了困扰。

可以通过以下的方法正确访问：

直接用 http://www.google.com/ncr ，ncr 是 no country redirection ，是一个强制不跳转的命令；
直接输入 https://www.google.com/ ，https 协议。

也可以自行设置搜索引擎：

Chrome – 设置 -搜索 - 管理搜索引擎 – 其他搜索引擎
拉到最下，有一个“添加”
名字：自己写，我写 http://google.com
关键字（keyword），我写 Google
最后一个空最重要，写入Url ( http://www.google.com/search?hl=zh-CN&q=%s) 或者 ( http://www.google.com/search?q=%s ) 括号为填写部分
然后将之设置成默认搜索引擎，搞定！

查看已连接的wifi密码

电脑查看方式：
1.打开cmd命令窗口
2、输入: netsh wlan show profiles
3.找到已连接过的wifi名称
4.再次输入netsh wlan show profiles "wifi的名称" key=clear
5.找到“关键内容”就是密码

手机查看方式：
进入设置后，选择无线和网络。点击“WLAN，再点击“已连接的网络”，截取系统自动生成的二维码，使用微信扫一扫，扫此截屏即可看到密码。

查询大厂校招真实薪资水平

打开微信小程序搜索offershow,点击搜索即可，来源真实可靠！

华为手机虚电如何处理

输入神奇代码手机输入 * # * # 2846579 # * # * ，进入工程模式，在该模式中找到补电功能，这就是去除虚电的关键。
补电前提使用该功能要确保手机电量在60%-75%之间，并且电池温度不能超过70度，因为电池超过70度就自燃的风险，不过并不用担心，一般正常使用手机是不会超过这个温度的。
开始补电电量为60%左右时，连接充电器并点击补电功能，页面就会显示在补电中，充到75%或者电池旁边的充电标识消失，就说明补电成功，也就可以拔掉充电器了，这时候你的华为手机显示的就是真实电量了。
补充说明
补电并非一定要充到75%的电量，因为每个人使用时长不同，电池中存在的虚电也不同，电池旁边的充电标识消失了，就会显示补电完成，电池中的虚电也就去除干净了。

编辑网站内容

打开浏览器控制台Console,输入如下代码：

1	document.designMode="on"

输入之后即可编辑网站内容，但一刷新网站就会还原了，只能用于恶搞或忽悠别人。

复制网站内容

遇到需要登录注册才可以复制的内容，如360个人图书馆文章内容，可以用一个代码就可以解决这个问题。
删除原来的网址，在URL栏上输入代码即可复制:

1	javascript:void($={});

但此方法对于百度文库VIP文档无效。也可以在控制台写入：$(‘div.ie-fix’).text()，然后回车即可复制，但是此方法只能一部分一部分复制，比较麻烦。

百度文库VIP文档复制小技巧

在文档右键点击检查（Ctrl+shift+I）打开控制台
点击Settings设置按钮，在Preferences中找到Debugger
将按钮Disable JavaScript勾上即可复制文档内容啦！
注意：复制的时候窗口要打开才行，关闭再复制就恢复原样了。

VIP文档下载技巧

打开油猴脚本
点击百度文库资料免费下载助手然后安装。
然后再打开VIP文档，发现会在屏幕的左侧出现”免费下载”悬浮按钮，点击即可！

不过这种方法有时候下载得到的不是真正的文档内容。可以下载一个冰点文库的软件，该软件可自由下载百度、豆丁、丁香、MBALib、Book118等文库文档，打开软件，复制要下载文档的URL地址，点击下载即可白嫖啦~

加密PDF如何编辑和复制

先将PDF文件上传到I love PDF进行解密操作。
然后再次下载即可得到解密的PDF文件，在Adobe Acrobat DC工具打开即可复制啦。
注意：Adobe Acrobat DC工具复制的时候不要打开编辑模式，否则复制的内容是乱码。

VIP视频在线解析

在谷歌浏览器中打开书签管理器，选择添加新书签，输入书签名称(如：VIP在线解析）和网址代码即可在网页中打开VIP视频时，再次点击该书签就可以进行解析观看了。
书签网址URL代码：

1	javascript:window.location ="https://vip.bljiex.com/?v="+window.location.href

iframe嵌入B站视频外链

将以下代码添加到主题的自定义CSS里：

/*视频挂载*/

.iframe_video {
    position: relative;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .iframe_video {
        height: 15em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .iframe_video {
        height: 20em;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .iframe_video {
        height: 30em;
    }
}

@media only screen and (min-width: 1200px) {
    .iframe_video {
        height: 40em;
    }
}

.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

视频Html代码：

1
2
3

<div>
<iframe class="iframe_video" src="https://player.bilibili.com/player.html?aid=11932135&cid=19697229&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>

切换网页 “夜间模式”标签

在浏览器新建一个新的标签页，把下面Js代码放入网址URL点击保存即可，名称随意,比如“夜间模式”。

javascript:(function(){var%C2%A0night=function(w){(function(d){var%C2%A0css='html{opacity:0.7!important;background:black!important;}body{background:white!important;}';var%C2%A0s=d.getElementsByTagName('style');for(var%C2%A0i=0,si;si=s[i];i++){if(si.innerHTML==css){si.parentNode.removeChild(si);return}};var%C2%A0heads=d.getElementsByTagName('head');if(heads.length){var%C2%A0node=d.createElement('style');node.type='text/css';node.appendChild(d.createTextNode(css));heads[0].appendChild(node)}})(w.document);%C2%A0for(var%C2%A0i=0,f;f=w.frames[i];i++){try{arguments.callee(f)}catch(e){}}};night(window)})();

开启暗黑/夜间模式

只需将以下代码加入网页 </body>之前即可。网页右下方将出现一个可切换正常模式或暗黑模式的按钮。

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>
<script>
  new Darkmode().showWidget();
</script>

Darkmode.js 使用 CSS mix-blend-mode 将暗黑模式带入任何网站。

还可以通过下面这些代码对js文件自定义：

var options = {
  bottom: '64px', // default: '32px'
  right: 'unset', // default: '32px'
  left: '32px', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: false, // default: true,
  label: '🌓', // default: ''
  autoMatchOsTheme: true // default: true
}

const darkmode = new Darkmode(options);
darkmode.showWidget();

更多高级自定义用法请移步Darkmode.js进行学习。

对于按钮样式总觉得有点不太好看，于是加入自己的CSS样式,让按钮感觉开了灯光效果：

1
2
3

.darkmode-toggle{
	box-shadow: 0px 0px 10px 5px #aaa;
}

给自己网站添加音乐播放器

方法一：打开网易云官网，进入我的主页，选择自己的歌单，点击生成外链播放器，选择尺寸，然后复制代码到网站中，最后给src链接添加https:即可。

1	<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=760 height=110 src="https://music.163.com/outchain/player?type=0&id=2505260244&auto=1&height=90"></iframe>

方法二：直接使用明月浩空音乐播放器，注册自己的账户，设置自己的域名和播放器ID生成代码使用。
免插件：将此段播放器代码插入到网页最底部的< /body>< /html>标签之前

1	<script src="https://player.lmih.cn/player/js/player.js" id="myhk" key="158720204358" m="1"></script>

（非必要）如果提示jQuery问题，将此段代码插入到网站的< header>，或播放器代码之前

1	<script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>

注意：https:需要自己加上，此播放器不仅可以设置自己的歌单，还可以免费下载付费音乐哦！更多福利可自行探索。。。

方法三：使用宅音乐播放器,和明月浩空音乐播放器类似注册使用，不过这个功能简陋，但可以添加多个音乐歌单，只是不太稳定，对于个人使用足够了。

1 2	<!-- 添加宅音乐播放器插件 --> <script id="ilt" src="https://player.ilt.me/player/js/player.js" key="1b8e0112801f4e76990df9469337dd1c"></script>

（非必要）如果提示jQuery问题，将此段代码插入到网站的< header>，或播放器代码之前

1	<script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>

给网站添加全网分享按钮

注意：代码要放在< body>元素中。

传送门：http://www.bshare.cn/

 <div class="bshare-custom icon-medium"><a title="分享到QQ空间" class="bshare-qzone"></a><a title="分享到微信" class="bshare-weixin"></a><a title="分享到QQ好友" class="bshare-qqim"></a><a title="分享到新浪微博" class="bshare-sinaminiblog"></a><a title="分享到Facebook" class="bshare-facebook"></a><a title="分享到网易微博" class="bshare-neteasemb"></a><a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a><span class="BSHARE_COUNT bshare-share-count">0</span></div><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=&pophcol=2&lang=zh"></script><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
<script type="text/javascript">
	bShare.addEntry({
		title: "向阳榆木",
		url: "https://panyongkang.github.io/mypages/OnlyI.html",
		summary: "致力于IT技术分享，帮助大家轻松导航和科学使用工具，便于学习",
		pic: "http://img0.imgtn.bdimg.com/it/u=379200563,285512275&fm=26&gp=0.jpg"
	});
</script>

给网页添加3D动态骰子

html代码：

<div class="box">
        <div class="o">欢迎</div>
        <div class="t">访问</div>
        <div class="th">小康</div>
        <div class="fo">生活</div>
        <div class="fi">幻影</div>
        <div class="s">空间</div>
    </div>

css代码：

.box {
            width: 100px;
            height: 100px;
			float: left;
            margin: 15px 50px;
            position: relative;
            transform-style: preserve-3d;  /*可以让骰子看来立体，给后面的旋转元素保留空间*/
           transition: all 5s;/*设置过度  单我鼠标经过会有一个x轴360度旋转，z轴旋转360def的效果*/
        }

        .box:hover {
            transform: rotateX(360deg) rotateZ(360deg); 
        }
       .box> div {
            width: 100%;
            height: 100%;
            position: absolute;/*设置定位 让盒子全都靠在在一起*/
            left: 0;
            top: 0;
            box-shadow:inset 0 0 15px rgba(0, 0, 0, .2);/*盒子内边距阴影  这样立体感效果十足*/
            background-color: rgba(255, 255, 255, .1);
            text-align: center;
            line-height: 100px;
        }
        .o {
            transform: translateZ(50px); 
        }
        .t {
            transform: rotateY(90deg) translateZ(50px);
        }
        .th {
            transform:rotateY(180deg) translateZ(50px) ;
        }
        .fo {
            transform: rotateY(-90deg) translateZ(50px);
        }
        .fi {
            transform:rotateX(-90deg) translateZ(50px) ;
        }
        .s {
            transform: rotateX(90deg) translateZ(50px); 
        }

添加打字效果

<div id="typeIt"></div>
<!-- 打字效果插件 -->
<script src ="https://cdn.jsdelivr.net/npm/typeit@6.1.1/dist/typeit.min.js"></script>
<script type="text/javascript">
	new TypeIt("#typeIt",{
	strings:'欢迎幸运的您访问我的网页，这里有您意想不到的资源哦。。。',
	speed: 100,
	startDelay: 2000
	}).go();
</script>

随鼠标移动的动态线条特效

使用bootstrap框架，在OnlyI文件夹下的bootstrap.min.js内将如下代码复制进入即可。

!function() {
    function n(n, e, t) {
        return n.getAttribute(e) || t
    }
    function e(n) {
        return document.getElementsByTagName(n)
    }
    function t() {
        var t = e("script"),
        o = t.length,
        i = t[o - 1];
        return {
            l: o,
            z: n(i, "zIndex", -1),
            o: n(i, "opacity", .5),
            c: n(i, "color", "0,0,0"),
            n: n(i, "count", 99)
        }
    }
    function o() {
        a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
    function i() {
        r.clearRect(0, 0, a, c);
        var n, e, t, o, m, l;
        s.forEach(function(i, x) {
            for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[e],
            null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y, l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
        }),
        x(i)
    }
    var a, c, u, m = document.createElement("canvas"),
    d = t(),
    l = "c_n" + d.l,
    r = m.getContext("2d"),
    x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(n) {
        window.setTimeout(n, 1e3 / 45)
    },
    w = Math.random,
    y = {
        x: null,
        y: null,
        max: 2e4
    };
    m.id = l,
    m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o,
    e("body")[0].appendChild(m),
    o(),
    window.onresize = o,
    window.onmousemove = function(n) {
        n = n || window.event,
        y.x = n.clientX,
        y.y = n.clientY
    },
    window.onmouseout = function() {
        y.x = null,
        y.y = null
    };
    for (var s = [], f = 0; d.n > f; f++) {
        var h = w() * a,
        g = w() * c,
        v = 2 * w() - 1,
        p = 2 * w() - 1;
        s.push({
            x: h,
            y: g,
            xa: v,
            ya: p,
            max: 6e3
        })
    }
    u = s.concat([y]),
    setTimeout(function() {
        i()
    },
    100)
} ();

运用时将其放在< body>中：

1	<script src="OnlyI/bootstrap.min.js"></script>

页面点击爱心特效

放在< head>或< body>都可以：

1	<script src="OnlyI/love.js"></script>

OnlyI/love.js代码：

!function(e, t, a) {
    function r() {
        for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }
    function n() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function(e) {
            t && t(),
            o(e)
        }
    }
    function o(e) {
        var a = t.createElement("div");
        a.className = "heart",
        s.push({
            el: a,
            x: e.clientX - 5,
            y: e.clientY - 5,
            scale: 1,
            alpha: 1,
            color: c()
        }),
        t.body.appendChild(a)
    }
    function i(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch(t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }
    function c() {
        return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"
    }
    var s = [];
    e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||
    function(e) {
        setTimeout(e, 1e3 / 60)
    },
    i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
    n(),
    r()
} (window, document);

点击按钮页面平滑至顶部/底部

html代码：

<div id="backUp" style="z-index: 9999; position: fixed ! important; right: 5px; bottom: 70px;">
     <img src="../../Content/img/top.png" />
</div>
<div id="backDown" style="z-index: 9999; position: fixed ! important; right: 5px; bottom: 30px;">
     <img style="transform:rotate(180deg);" src="../../Content/img/top.png" />
</div>

JS代码：

//回顶部
$('#backUp').click(function () { $('html,body').animate({ scrollTop: '0px' }, 2000); return false; });
//回底部（网页最末端）
$('#backDown').click(function () { $('html,body').animate({ scrollTop: document.getElementsByTagName('BODY')[0].scrollHeight}, 2000); return false; });

图片：

添加字体闪烁(变色)特效

给要添加特效的元素添加 class=”magic-color”。
将以下代码复制到元素后面或者放在< head>标签中。

<!-- 添加字体闪烁（变色）特效 -->
<script>function magicColor(mode,t){
    t=t||10;
    let elem=document.getElementsByClassName("magic-color");
    if(!elem){
        setTimeout(function(){
            magicColor(mode,t-1);
        },400);
        return;
    }
    if(window.mcHandler==undefined){
        window.mcHandler={elements:[]};
        window.mcHandler.colorIndex=0;
        window.mcHandler.run=function(mode){
            let color=mode=="random"?("rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+",1)"):["#CC0000","#9999CC","#CC3366","#669999","#FFCC00","#00CCCC","#CC00CC"][(window.mcHandler.colorIndex++)%7];
            for(var i=0,L=window.mcHandler.elements.length;i<L;i++)window.mcHandler.elements[i].style.color=color;
        }
    }
    window.mcHandler.elements=elem;
    if(window.mcHandler.timer==undefined){
        window.mcHandler.timer=setInterval(()=>{window.mcHandler.run(mode)},500);
    }
}
magicColor("");</script>

添加一个天气插件

使用方法
注册中国天气网帐号或登录（已有帐号）
登陆后打开天气插件网页
自定义喜欢的插件样式
自定义样式完成后输入自定义插件名称，点击生成代码，会看到类似下方代码

<!-- 天气预报 -->
<script type="text/javascript">
WIDGET = {FID: 'xMTkJaIYK0'}
</script>
<script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"></script>

将生成的代码复制到 html 文件里即可

添加动漫玩偶效果

方法一：将下面代码放入网页的< head>标签中即可，但只有单个看板娘，可能需要根据自己网页布局调试。

<!--看板娘CSS -->
<style>
canvas#live2dcanvas {
border: 0 !important;
left: 0;
}
</style>

<!--看板娘小女孩 -->
<script src="https://blog-static.cnblogs.com/files/luzhanshi/kbn.js"></script>
<script src="https://blog-static.cnblogs.com/files/luzhanshi/L2Dwidget.0.min.js"></script>

<script src="https://blog-static.cnblogs.com/files/luzhanshi/L2Dwidget.min.js"></script>

<script>
　　L2Dwidget.init({ "model": { jsonPath:
　　"https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
　　"scale": 1 }, "display": { "position": "right", "width": 110, "height": 210,
　　"hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 },
　　"react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 } });
</script>

方法二：只需3行代码，为网站博客添加萌萌哒看板娘可爱二次元女动漫玩偶人物（推荐）

<!--三行代码实现看板娘 start -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
<!--三行代码实现看板娘 end -->

定制看板娘的语录(调教你的看板娘)

从github中下载项目: https://github.com/stevenjoezhang/live2d-widget
更改waifu-tip.json里面的内容
更改autoload.js的引入位置

将< script src=”https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js" ></script > 改成自己修改后的路径

Live2D的使用

可以自定义添加更多自己喜欢的看板娘效果。

<!-- 固定看板娘效果 -->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
　　　　　　　//jsonpath控制显示那个小萝莉模型，下面这个就是我觉得最可爱的小萝莉模型
            jsonPath: "https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json",
            "scale": 1
        },
        "display": {
            "position": "right", //看板娘的表现位置
            "width": 150,  //小萝莉的宽度
            "height": 300, //小萝莉的高度
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
</script>

通过替换代码中jsonPath来替换模型，可选的模型列表：

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01
live2d-widget-model-haru/02
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

<code style="color:red;">注意：</code>比如更换模型为 live2d-widget-model-koharu，则jsonPath: “https://unpkg.com/`live2d-widget-model-koharu@1.0.5/assets/koharu`.model.json”,将标红部分改为自定义模型对应名称即可。

live2d-widget-models的GitHub地址：https://github.com/xiazeyu/live2d-widget-models

添加浮动小人效果

JQery代码引入：放在< head>标签中

1 2	<!-- 浮动的小人必须先加载的JQuery插件，否则无法拖动 --> <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>

JS代码：放在< body>标签底部

<!--.浮动小人-->  
<script type="text/javascript">
<?php if(is_home()) echo 'var isindex=true;var title="";';else echo 'var isindex=false;var title="', get_the_title(),'";'; ?>
<?php if((($display_name = wp_get_current_user()->display_name) != null)) echo 'var visitor="',$display_name,'";'; else if(isset($_COOKIE['comment_author_'.COOKIEHASH])) echo 'var visitor="',$_COOKIE['comment_author_'.COOKIEHASH],'";';else echo 'var visitor="游客";';echo "\n"; ?>
</script>
<script type="text/javascript" src="放置的js文件路径/spig.js"></script>
<style>
.spig {display:block;width:130px;height:170px;position:absolute;bottom: 300px;left:160px;z-index:9999;}
#message{color :#191919;border: 1px solid #c4c4c4;background:#ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;min-height:1em;padding:5px;top:-45px;position:absolute;text-align:center;width:auto !important;z-index:10000;-moz-box-shadow:0 0 15px #eeeeee;-webkit-box-shadow:0 0 15px #eeeeee;border-color:#eeeeee;box-shadow:0 0 15px #eeeeee;outline:none;}
.mumu{width:130px;height:170px;cursor: move;background:url(小人图片路径/spig.png) no-repeat;}
</style>

<div id="spig" class="spig">
<div id="message">加载中……</div>
<div id="mumu" class="mumu"></div>
</div>
<!--.end浮动小人-->

其中修改一下src路径和url路径即可。

浮动小人部分素材网盘下载地址

给系统鼠标添加星星特效

下载地址

<code style="color:red">说明 </code>：下载直接解压后，双击打开Star Cursor.EXE程序，出现星星特效说明已经启动成功了，不需要再将其关闭即可。

美化鼠标样式

下载链接

找到自己喜欢的鼠标样式，下载解压后，找到.inf文件，右键安装，在弹出的设置里面选择样式应用即可。

网页添加鼠标跟随样式

1 2	<!--引入鼠标**跟随的特效--> <script src="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/mouse_snow.min.js"></script>

自动播放背景音乐

选择自己喜欢的音乐作为网页的背景音乐，但大多浏览器已不再支持标签audio的自动播放功能。

代码一：

<!--自动播放音乐-->
<audio autoplay="autoplay">
<!--通过外链转换工具https://link.hhtjim.com/，将音乐id转成mp3格式-->
<source src="https://link.hhtjim.com/163/523251118.mp3" type="audio/mpeg">
<script type="text/javascript">
		document.getElementById('bgaudio').play();
</script>
</audio>

代码二：

<audio controls="controls" autoplay="autoplay" preload="auto">
 	<source src="https://www.joy127.com/url/79687.mp3 " type="audio/mp3" />
</audio>
<style type="text/css">
     audio{
             display: none;
         }
</style>

注意：需要域名引入才能播放，本地引入无法播放。

标题title切换效果

<!-- 标题title切换效果 -->
<script>
        var originTitle = document.title;
        var titleTime;
        document.addEventListener("visibilitychange", function() {
            if (document.hidden) {
                document.title = "(つェ⊂) 我藏好了哦~ " + originTitle;
                clearTimeout(titleTime);
            }
            else {
                document.title = "(*´∇｀*) 被你发现啦~ " + originTitle;
                titleTime = setTimeout(function() {
                    document.title = originTitle;
                }, 2000);
            }
        })
</script>

挂灯笼特效

第一步、添加HTML代码

<!-- 灯笼 1 -->
<div class="deng-box">
    <div class="deng">
        <div class="xian"></div>
        <div class="deng-a">
            <div class="deng-b"><div class="deng-t">春节</div></div>
        </div>
        <div class="shui shui-a"></div>
        <div class="shui shui-b"></div>
        <div class="shui shui-c"></div>
    </div>
</div>
<!-- 灯笼 2 -->
<div class="deng-box1">
    <div class="deng">
        <div class="xian"></div>
        <div class="deng-a">
            <div class="deng-b"><div class="deng-t">快乐</div></div>
        </div>
        <div class="shui shui-a"></div>
        <div class="shui shui-b"></div>
        <div class="shui shui-c"></div>
    </div>
</div>

第二步、添加CSS样式

/* 挂灯笼特效		 */
.xian {
    position: absolute;
    top: -20px;
    left: 60px;
    width: 2px;
    height: 20px;
    background: #dc8f03;
}
.deng-box {
    position: fixed;
    top: -30px;
	/* right: -20px; */
    z-index: 999;
}
.deng-box1 {
    position: fixed;
    top: -30px;
    right: 0px;
    z-index: 999;
}
.deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.9);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.9);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng-a {
    width: 100px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.2);
    margin: 12px 8px 8px 8px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
.deng-b {
    width: 45px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.2);
    margin: -4px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
.shui {
    width: 5px;
    height: 40px;
    background: #ffa500;
    border-radius: 0 0 5px 5px;
}
.shui-a {
    margin: -10px 0 0 40px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -20px;
}
.shui-b {
    margin: -35px 0 0 59px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
}
.shui-c {
    margin: -45px 0 0 77px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -25px;
}
.deng:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    z-index: 999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    margin-left: 20px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-t {
    font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
    font-size: 1.8rem;
    color: #dc8f03;
    font-weight: bold;
    line-height: 40px;
    margin-top: 8px;
    text-align: center;
}
.night .deng-t,
.night .deng-box,
.night .deng-box1 {
    background: transparent !important;
}
@-moz-keyframes swing {
    0% {
        -moz-transform: rotate(-10deg)
    }
    50% {
        -moz-transform: rotate(10deg)
    }
    100% {
        -moz-transform: rotate(-10deg)
    }
}
@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotate(-10deg)
    }
    50% {
        -webkit-transform: rotate(10deg)
    }
    100% {
        -webkit-transform: rotate(-10deg)
    }
}

CSS样式代码量较多，可在CSS目录下建立deng.css文件，将其引入< head>标签中即可。

1 2	<!-- 灯笼CSS样式 --> <link href="css/deng.css" type="text/css" rel="stylesheet" />

梅花枝特效

添加html代码

1 2	<!-- 梅花枝，可删除 --> <div class="meiha"></div>

添加CSS代码

/**梅花枝CSS**/
	.meiha {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 999;/** 参数越大，堆叠顺序越往前 **/
		width: 350px;/** PNG图宽度 **/
		height: 231px;/** PNG图高度 **/
		pointer-events: none;
		background: url('https://s1.ax1x.com/2020/10/26/Bni5As.png') no-repeat;
	}

这里使用的是fixed相对浏览器窗口定位，想要绝对定位在网页某处时，在父元素添加position:relative;相对定位，子元素再使用position: absolute;相对于父元素进行绝对定位，这样可以有效避免手机端浏览器不兼容问题。

梅花灯笼效果

Html代码：

1
2
3

<!-- 梅花灯笼效果 -->
<img src="https://img.imgdb.cn/item/60420e5f360785be540d1bb1.png" alt="" class="lantern lantern-l">
<img src="https://img.imgdb.cn/item/60420e5f360785be540d1bb5.png" alt="" class="lantern lantern-r">

CSS代码：

/* 梅花灯笼效果 */
.lantern {
    z-index: 1;
    position: fixed;
    top: 0;
    -webkit-animation: swing1 ease-in-out 5s infinite alternate;
    animation: swing1 ease-in-out 5s infinite alternate
}

.lantern-l {
    left: 0;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation: swing1 ease-in-out 5s infinite alternate;
    animation: swing1 ease-in-out 5s infinite alternate
}

.lantern-r {
    right: 0;
    -webkit-transform-origin: top right;
    -ms-transform-origin: top right;
    transform-origin: top right;
    -webkit-animation: swing2 ease-in-out 5s infinite alternate;
    animation: swing2 ease-in-out 5s infinite alternate
}

@-webkit-keyframes swing1 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    50% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@keyframes swing1 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    50% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@-webkit-keyframes swing2 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    50% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

@keyframes swing2 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    50% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
}

枫叶飘落特效

引入前先下载相关文件：js和img文件获取

在< /head>标签前引入CSS代码：

1	<link href="js/zdy.css" type="text/css" rel="stylesheet">

在< /body>标签前添加js代码

<!-- 枫叶飘落特效 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/snowfall.jquery.js"></script>
<script type="text/javascript" src="js/zdy.js"></script>

还可以通过一行js代码实现樱花飘落效果。

1	<script src="https://www.zyglz.com/usr/uploads/yinghua.js"></script>

全局自定义鼠标样式

/* 全局添加鼠标样式 */
*{ cursor:url('https://www.trueme.net/images/yuhou_tree.cur'),auto;}
a:hover {  cursor: url('https://ihuan.me/wp-content/themes/CKoo/1.cur'), pointer !important;
}

叶子飘落特效

步骤一：引入< head>标签处的CSS代码：

1
2
3

<!-- 树叶飘落装饰特效CSS -->
<link rel="stylesheet" type="text/css" href="https://panyongkang.github.io/mypages/GreedySnake/css/default.css">
<link rel="stylesheet" href="https://panyongkang.github.io/mypages/GreedySnake/css/jquery.classyleaves.min.css" />

步骤二：引入< body>标签处的html、JS代码：


<a href="#" class="addLeaf btn btn-danger">增加叶子</a>

<!-- 叶子飘落特效JS	 -->
<script src="https://panyongkang.github.io/mypages/GreedySnake/js/jquery.min.js"></script>
<script src="https://panyongkang.github.io/mypages/GreedySnake/js/jquery.rotate.js"></script>
<script src="https://panyongkang.github.io/mypages/GreedySnake/js/jquery.classyleaves.min.js"></script>
    <script>
        $(document).ready(function() {
            var tree = new ClassyLeaves({
                leaves: 30,
                maxY: -10,
                multiplyOnClick: true,
                multiply: 2,
                infinite: true,
                speed: 4000
            });
            $('body').on('click', '.addLeaf', function() {
                tree.add(8);
                return false;
            });
        });
    </script>

雪花特效

在网页末尾< /body>上方（这样可以最后加载特效，以免影响其他内容的访问速度）

<!-- 下雪特效一 -->
<script type="text/javascript" src="https://api.dujin.org/js/xiaxue/xiaxue.js"></script>

<!-- 下雪特效二 -->
<script type="text/javascript">
(function($){
	$.fn.snow = function(options){
	var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),
	documentHeight 	= $(document).height(),
	documentWidth	= $(document).width(),
	defaults = {
		minSize		: 10,
		maxSize		: 20,
		newOn		: 1000,
		flakeColor	: "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
	},
	options	= $.extend({}, defaults, options);
	var interval= setInterval( function(){
	var startPositionLeft = Math.random() * documentWidth - 100,
	startOpacity = 0.5 + Math.random(),
	sizeFlake = options.minSize + Math.random() * options.maxSize,
	endPositionTop = documentHeight - 200,
	endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
	durationFall = documentHeight * 10 + Math.random() * 5000;
	$flake.clone().appendTo('body').css({
		left: startPositionLeft,
		opacity: startOpacity,
		'font-size': sizeFlake,
		color: options.flakeColor
	}).animate({
		top: endPositionTop,
		left: endPositionLeft,
		opacity: 0.2
	},durationFall,'linear',function(){
		$(this).remove()
	});
	}, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
	    minSize: 5, /* 定义雪花最小尺寸 */
	    maxSize: 50,/* 定义雪花最大尺寸 */
	    newOn: 300  /* 定义密集程度，数字越小越密集 */
    });
});
</script>

<!-- 下雪特效三 -->
<script type="text/javascript">
    /* 控制下雪 */
    function snowFall(snow) {
        /* 可配置属性 */
        snow = snow || {};
        this.maxFlake = snow.maxFlake || 200;   /* 最多片数 */
        this.flakeSize = snow.flakeSize || 10;  /* 雪花形状 */
        this.fallSpeed = snow.fallSpeed || 1;   /* 坠落速度 */
    }
    /* 兼容写法 */
    requestAnimationFrame = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        function(callback) { setTimeout(callback, 1000 / 60); };
 
    cancelAnimationFrame = window.cancelAnimationFrame ||
        window.mozCancelAnimationFrame ||
        window.webkitCancelAnimationFrame ||
        window.msCancelAnimationFrame ||
        window.oCancelAnimationFrame;
    /* 开始下雪 */
    snowFall.prototype.start = function(){
        /* 创建画布 */
        snowCanvas.apply(this);
        /* 创建雪花形状 */
        createFlakes.apply(this);
        /* 画雪 */
        drawSnow.apply(this)
    }
    /* 创建画布 */
    function snowCanvas() {
        /* 添加Dom结点 */
        var snowcanvas = document.createElement("canvas");
        snowcanvas.id = "snowfall";
        snowcanvas.width = window.innerWidth;
        snowcanvas.height = document.body.clientHeight;
        snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
        document.getElementsByTagName("body")[0].appendChild(snowcanvas);
        this.canvas = snowcanvas;
        this.ctx = snowcanvas.getContext("2d");
        /* 窗口大小改变的处理 */
        window.onresize = function() {
            snowcanvas.width = window.innerWidth;
            /* snowcanvas.height = window.innerHeight */
        }
    }
    /* 雪运动对象 */
    function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
        this.x = Math.floor(Math.random() * canvasWidth);   /* x坐标 */
        this.y = Math.floor(Math.random() * canvasHeight);  /* y坐标 */
        this.size = Math.random() * flakeSize + 2;          /* 形状 */
        this.maxSize = flakeSize;                           /* 最大形状 */
        this.speed = Math.random() * 1 + fallSpeed;         /* 坠落速度 */
        this.fallSpeed = fallSpeed;                         /* 坠落速度 */
        this.velY = this.speed;                             /* Y方向速度 */
        this.velX = 0;                                      /* X方向速度 */
        this.stepSize = Math.random() / 30;                 /* 步长 */
        this.step = 0                                       /* 步数 */
    }
    flakeMove.prototype.update = function() {
        var x = this.x,
            y = this.y;
        /* 左右摆动(余弦) */
        this.velX *= 0.98;
        if (this.velY <= this.speed) {
            this.velY = this.speed
        }
        this.velX += Math.cos(this.step += .05) * this.stepSize;
 
        this.y += this.velY;
        this.x += this.velX;
        /* 飞出边界的处理 */
        if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
            this.reset(canvas.width, canvas.height)
        }
    };
    /* 飞出边界-放置最顶端继续坠落 */
    flakeMove.prototype.reset = function(width, height) {
        this.x = Math.floor(Math.random() * width);
        this.y = 0;
        this.size = Math.random() * this.maxSize + 2;
        this.speed = Math.random() * 1 + this.fallSpeed;
        this.velY = this.speed;
        this.velX = 0;
    };
    // 渲染雪花-随机形状（此处可修改雪花颜色！！！）
    flakeMove.prototype.render = function(ctx) {
        var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
        snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此处是雪花颜色，默认是白色 */
        snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
        snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16进制的RGB 颜色代码。 */
        ctx.save();
        ctx.fillStyle = snowFlake;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
    };
    /* 创建雪花-定义形状 */
    function createFlakes() {
        var maxFlake = this.maxFlake,
            flakes = this.flakes = [],
            canvas = this.canvas;
        for (var i = 0; i < maxFlake; i++) {
            flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
        }
    }
    /* 画雪 */
    function drawSnow() {
        var maxFlake = this.maxFlake,
            flakes = this.flakes;
        ctx = this.ctx, canvas = this.canvas, that = this;
        /* 清空雪花 */
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (var e = 0; e < maxFlake; e++) {
            flakes[e].update();
            flakes[e].render(ctx);
        }
        /*  一帧一帧的画 */
        this.loop = requestAnimationFrame(function() {
            drawSnow.apply(that);
        });
    }
    /* 调用及控制方法 */
    var snow = new snowFall({maxFlake:500});
    snow.start();
</script>

新春对联特效

<!-- 新春对联JS -->
<SCRIPT language="JavaScript">
lastScrollY = 0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}
//alert(diffY);
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("leftDiv").style.top = parseInt(document.getElementById("leftDiv").style.top)+percent+"px";
document.getElementById("rightDiv").style.top = parseInt(document.getElementById("rightDiv").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
//alert(lastScrollY);
}
//下面这段删除后，对联将不跟随屏幕而移动。
window.setInterval("heartBeat()",1);
//-->
//关闭按钮
function close_left2(){
 left2.style.visibility='hidden';
}
function close_right2(){
 right2.style.visibility='hidden';
}
//显示样式
document.writeln("<style type=\"text\/css\">");
document.writeln("#leftDiv,#rightDiv{position:absolute;}");
document.writeln(".itemFloat{width:100px;height:auto;line-height:5px}");
document.writeln("<\/style>");
//以下为主要内容
document.writeln("<div id=\"leftDiv\" style=\"top:112px;left:50px\">");
//------左侧各块开始
//---L2
document.writeln("<div id=\"left2\" class=\"itemFloat\">");
document.writeln("<img border=0 src=https://www.dujin.org/images/duilianz.jpg>");
document.writeln("<br><a href=\"javascript:close_left2();\" title=\"关闭上面的广告\">×<\/a>");
document.writeln("<\/div>");
//------左侧各块结束
document.writeln("<\/div>");
document.writeln("<div id=\"rightDiv\" style=\"top:112px;right:50px\">");
//------右侧各块结束
//---R2
document.writeln("<div id=\"right2\" class=\"itemFloat\">");
document.writeln("<img border=0 src=https://www.dujin.org/images/duiliany.jpg>");
document.writeln("<br><a href=\"javascript:close_right2();\" title=\"关闭上面的广告\">×<\/a>");
document.writeln("<\/div>");
//------右侧各块结束
document.writeln("<\/div>");
</SCRIPT>

加入了一下css样式是为了手机端不显示该特效。

1	@media (max-width:1500px){#leftDiv,#rightDiv{display:none !important}}

跑马灯效果

<!-- 跑马灯效果 -->
<div id="pmd" style="color: white;background-color: #ff0018;text-align: center;font-size: 30px;">小康空间站欢迎您的来访！</div>
    <script type="text/javascript">
        setInterval(function ()//通过定时器重复动作
        {
            var oTxt = document.getElementById('pmd'); //获取标签
            var txt = oTxt.innerText; //获取标签文本内容
            // console.log(typeof txt)  页面控制台查看是string
            var first_i = txt[0]; //字符串索引取值
            var last_i = txt.slice(1,txt.length);//字符串切片
            var new_txt = last_i + first_i;//字符串拼接
            oTxt.innerText = new_txt; //拼接后的字符串放到标签文本内容
        },500)
    </script>

点击显示文字效果

<!-- 点击显示文字效果 -->
<script type="text/javascript">
    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
         var a = new Array("小康", "空间站", "欢迎", "您的","来访");
            var $i = $("<span/>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
            y = e.pageY;
            $i.css({
                "z-index": 9999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "#ff0000"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
           },
           2000,
            function() {
                $i.remove();
            });
        });
    });
    </script>

恋爱计时器

<div id="lovexhj" style="width: 100%; height: 100px; text-align: center; font-size: 1rem;">
    <div id="lovexhjImage" style="width: 220px; margin: 0 auto;">
        <!-- 左边的头像 -->
        <img src="https://q1.qlogo.cn/g?b=qq&nk=304915556&s=640" alt="love"
            style="width: 60px; border-radius: 50%;">
        <!-- 中间的图片 -->
        <img src="https://cdn.nutssss.cn/wp-content/uploads/2020/02/1582858549-lovexhjlogo.gif" alt="love"
            style="width: 60px; border-radius: 50%;">
        <!-- 右边的头像 -->
        <img src="https://q1.qlogo.cn/g?b=qq&nk=1656071287&s=640" alt="love"
            style="width: 60px; border-radius: 50%;">
    </div>
    <p id="lovexhjSitetime" style="font-size: 0.8rem;"></p>
    <script language=javascript>
        function lovexhjSitetime() {
            window.setTimeout("lovexhjSitetime()", 1000);
            var seconds = 1000
            var minutes = seconds * 60
            var hours = minutes * 60
            var days = hours * 24
            var years = days * 365
            var today = new Date()
            var todayYear = today.getFullYear()
            var todayMonth = today.getMonth() + 1
            var todayDate = today.getDate()
            var todayHour = today.getHours()
            var todayMinute = today.getMinutes()
            var todaySecond = today.getSeconds()
            // 时间设置
            var t1 = Date.UTC(2018, 03, 01, 00, 00, 00)
            var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond)
            var diff = t2 - t1
            var diffYears = Math.floor(diff / years)
            var diffDays = Math.floor((diff / days) - diffYears * 365)
            var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours)
            var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes)
            var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
                diffMinutes * minutes) / seconds)
            document.getElementById("lovexhjSitetime").innerHTML = "我们相恋了" + diffYears + "年" + diffDays + "天" +
                diffHours + "小时" + diffMinutes + "分钟" + diffSeconds + "秒啦"
        }
        lovexhjSitetime()
    </script>
</div>

蒲公英效果

html代码：

<!-- 底部蒲公英特效 -->
 <div class="dandelion">
 <span class="smalldan"></span>
 <span class="bigdan"></span>
</div>

CSS代码：

/* 蒲公英特效 */
@media screen and (max-width:600px){
.dandelion{display: none !important;}
}
.dandelion .smalldan {
width: 36px;
height: 60px;
right: 88px;
background-position: 0 -90px;
}
.dandelion span {
-webkit-animation: ball-x 3s linear 2s infinite;
 -moz-animation: ball-x 3s linear 2s infinite;
 animation: ball-x 3s linear 2s infinite;
-webkit-transform-origin: bottom center;
 -moz-transform-origin: bottom center;
 transform-origin: bottom center;
}
.dandelion span {
display: block;
position: fixed;
z-index:9999999999;
bottom: 0px;
background-image: url(https://panyongkang.github.io/mypages/GreedySnake/images/pgy.png);
background-repeat: no-repeat;
}
.dandelion .bigdan {
width: 64px;
height: 115px;
right: 41px;
background-position: -86px -36px;
}
@keyframes ball-x {
 0% { transform:rotate(0deg);}
 25% { transform:rotate(5deg); }
 50% { transform:rotate(0deg);}
 75% { transform:rotate(-5deg);}
 100% { transform:rotate(0deg);}
}
@-webkit-keyframes ball-x {
 0% { -webkit-transform:rotate(0deg);}
 25% { -webkit-transform:rotate(5deg); }
 50% { -webkit-transform:rotate(0deg);}
 75% { -webkit-transform:rotate(-5deg);}
 100% { -webkit-transform:rotate(0deg);}
}
@-moz-keyframes ball-x {
 0% { -moz-transform:rotate(0deg);}
 25% { -moz-transform:rotate(5deg); }
 50% { -moz-transform:rotate(0deg);}
 75% { -moz-transform:rotate(-5deg);}
 100% { -moz-transform:rotate(0deg);}
}

给网站添加底部波浪特效

将下面代码复制到footer标签合适的地方：

<div class="waveHorizontals mobile-hide"> 
		<div id="waveHorizontal1" class="waveHorizontal"></div> 
		<div id="waveHorizontal2" class="waveHorizontal"></div> 
		<div id="waveHorizontal3" class="waveHorizontal"></div>
	</div>

将下面代码复制到你的网站主css文件里：

/* 底部波浪 */
.waveHorizontals {
    width: 100%;
    height: 20px;
    position: relative;
    overflow: hidden;
    z-index: 1;
  background-color:#fff !important
}
.ripro-dark .waveHorizontals {
    width: 100%;
    height: 20px;
    position: relative;
    overflow: hidden;
    z-index: 1;
  background-color:#181616 !important
}
#waveHorizontal1 {
    -webkit-mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_001.svg);
    mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_001.svg);
    animation-delay: -2s;
    animation-duration: 12s;
}
#waveHorizontal1, #waveHorizontal2, #waveHorizontal3 {
    background-image: linear-gradient(20deg,#f84270 0,#fe803b 100%)!important;
}
.ripro-dark #waveHorizontal1{
    background-color: #f1f1f1!important;
}
.ripro-dark  #waveHorizontal2{
    background-color: #f1f1f1!important;
}
.ripro-dark  #waveHorizontal3{
    background-color: #f1f1f1!important;
}
.waveHorizontal {
    width: 200%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 350px 100%;
    transform-origin: 0 100% 0;
    animation-name: move;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes move{0%{transform:translate(-175px,0px) scale(1,1)}50%{transform:translate(-87px,0px) scale(1,0.5)}100%{transform:translate(0px,0px) scale(1,1)}}

#waveHorizontal2 {
    -webkit-mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_002.svg);
    mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_002.svg);
    animation-delay: -2s;
    animation-duration: 5s;
}
#waveHorizontal3 {
    -webkit-mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_003.svg);
    mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_003.svg);
    animation-delay: -1s;
    animation-duration: 3s;
}

CSS3实现文字跑马灯(流光)效果

.pmd {
            margin: 0;
            background: -webkit-linear-gradient(left,
                #ffffff,
                #ff0000 6.25%,
                #ff7d00 12.5%,
                #ffff00 18.75%,
                #00ff00 25%,
                #00ffff 31.25%,
                #0000ff 37.5%,
                #ff00ff 43.75%,
                #ffff00 50%,
                #ff0000 56.25%,
                #ff7d00 62.5%,
                #ffff00 68.75%,
                #00ff00 75%,
                #00ffff 81.25%,
                #0000ff 87.5%,
                #ff00ff 93.75%,
                #ffff00 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: 200% 100%;
            animation: masked-animation 2s infinite linear;
        }
           @keyframes masked-animation {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: -100%, 0;
        }
    }

文字跳动效果

CSS代码如下：

/* start */
 .my-face {
    animation: my-face 5s infinite ease-in-out;
    color: #00f1ff;
    display: inline-block;
    margin: 0 5px;
}
@-webkit-keyframes my-face {
    2%, 24%, 80% {
        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
        transform: translate(0, 1.5px) rotate(1.5deg)
    }
    4%, 68%, 98% {
        -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
        transform: translate(0, -1.5px) rotate(-.5deg)
    }
    38%, 6% {
        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
        transform: translate(0, 1.5px) rotate(-1.5deg)
    }
    8%, 86% {
        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
        transform: translate(0, -1.5px) rotate(-1.5deg)
    }
    10%, 72% {
        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
        transform: translate(0, 2.5px) rotate(1.5deg)
    }
    12%, 64%, 78%, 96% {
        -webkit-transform: translate(0, -.5px) rotate(1.5deg);
        transform: translate(0, -.5px) rotate(1.5deg)
    }
    14%, 54% {
        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
        transform: translate(0, -1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
        transform: translate(0, -.5px) rotate(-1.5deg)
    }
    18%, 22% {
        -webkit-transform: translate(0, .5px) rotate(-1.5deg);
        transform: translate(0, .5px) rotate(-1.5deg)
    }
    20%, 36%, 46% {
        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translate(0, .5px) rotate(.5deg);
        transform: translate(0, .5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translate(0, .5px) rotate(1.5deg);
        transform: translate(0, .5px) rotate(1.5deg)
    }
    30%, 40%, 62%, 76%, 88% {
        -webkit-transform: translate(0, -.5px) rotate(2.5deg);
        transform: translate(0, -.5px) rotate(2.5deg)
    }
    32%, 34%, 66% {
        -webkit-transform: translate(0, 1.5px) rotate(-.5deg);
        transform: translate(0, 1.5px) rotate(-.5deg)
    }
    42% {
        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
        transform: translate(0, 2.5px) rotate(-1.5deg)
    }
    44%, 70% {
        -webkit-transform: translate(0, 1.5px) rotate(.5deg);
        transform: translate(0, 1.5px) rotate(.5deg)
    }
    48%, 74%, 82% {
        -webkit-transform: translate(0, -.5px) rotate(.5deg);
        transform: translate(0, -.5px) rotate(.5deg)
    }
    52%, 56%, 60% {
        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
        transform: translate(0, 2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translate(0, .5px) rotate(2.5deg);
        transform: translate(0, .5px) rotate(2.5deg)
    }
    84% {
        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
        transform: translate(0, 1.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translate(0, 2.5px) rotate(-.5deg);
        transform: translate(0, 2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translate(0, .5px) rotate(-.5deg);
        transform: translate(0, .5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translate(0, 2.5px) rotate(.5deg);
        transform: translate(0, 2.5px) rotate(.5deg)
    }
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}
@keyframes my-face {
    2%, 24%, 80% {
        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
        transform: translate(0, 1.5px) rotate(1.5deg)
    }
    4%, 68%, 98% {
        -webkit-transform: translate(0, -1.5px) rotate(-.5deg);
        transform: translate(0, -1.5px) rotate(-.5deg)
    }
    38%, 6% {
        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
        transform: translate(0, 1.5px) rotate(-1.5deg)
    }
    8%, 86% {
        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
        transform: translate(0, -1.5px) rotate(-1.5deg)
    }
    10%, 72% {
        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
        transform: translate(0, 2.5px) rotate(1.5deg)
    }
    12%, 64%, 78%, 96% {
        -webkit-transform: translate(0, -.5px) rotate(1.5deg);
        transform: translate(0, -.5px) rotate(1.5deg)
    }
    14%, 54% {
        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
        transform: translate(0, -1.5px) rotate(1.5deg)
    }
    16% {
        -webkit-transform: translate(0, -.5px) rotate(-1.5deg);
        transform: translate(0, -.5px) rotate(-1.5deg)
    }
    18%, 22% {
        -webkit-transform: translate(0, .5px) rotate(-1.5deg);
        transform: translate(0, .5px) rotate(-1.5deg)
    }
    20%, 36%, 46% {
        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg)
    }
    26%, 50% {
        -webkit-transform: translate(0, .5px) rotate(.5deg);
        transform: translate(0, .5px) rotate(.5deg)
    }
    28% {
        -webkit-transform: translate(0, .5px) rotate(1.5deg);
        transform: translate(0, .5px) rotate(1.5deg)
    }
    30%, 40%, 62%, 76%, 88% {
        -webkit-transform: translate(0, -.5px) rotate(2.5deg);
        transform: translate(0, -.5px) rotate(2.5deg)
    }
    32%, 34%, 66% {
        -webkit-transform: translate(0, 1.5px) rotate(-.5deg);
        transform: translate(0, 1.5px) rotate(-.5deg)
    }
    42% {
        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
        transform: translate(0, 2.5px) rotate(-1.5deg)
    }
    44%, 70% {
        -webkit-transform: translate(0, 1.5px) rotate(.5deg);
        transform: translate(0, 1.5px) rotate(.5deg)
    }
    48%, 74%, 82% {
        -webkit-transform: translate(0, -.5px) rotate(.5deg);
        transform: translate(0, -.5px) rotate(.5deg)
    }
    52%, 56%, 60% {
        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
        transform: translate(0, 2.5px) rotate(2.5deg)
    }
    58% {
        -webkit-transform: translate(0, .5px) rotate(2.5deg);
        transform: translate(0, .5px) rotate(2.5deg)
    }
    84% {
        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
        transform: translate(0, 1.5px) rotate(2.5deg)
    }
    90% {
        -webkit-transform: translate(0, 2.5px) rotate(-.5deg);
        transform: translate(0, 2.5px) rotate(-.5deg)
    }
    92% {
        -webkit-transform: translate(0, .5px) rotate(-.5deg);
        transform: translate(0, .5px) rotate(-.5deg)
    }
    94% {
        -webkit-transform: translate(0, 2.5px) rotate(.5deg);
        transform: translate(0, 2.5px) rotate(.5deg)
    }
    0%, 100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0)
    }
}
/* end */

然后在想要的文字插入class=”my-face”：

1	<span class="my-face">不停的跳动！</span>

实现输入礼花及震动特效

新建一个activate-power-mode.js文件，将下面代码拷贝放在js目录中引入即可。

(function webpackUniversalModuleDefinition(root,factory){if(typeof exports==='object'&&typeof module==='object')module.exports=factory();else if(typeof define==='function'&&define.amd)define([],factory);else if(typeof exports==='object')exports["POWERMODE"]=factory();else root["POWERMODE"]=factory()})(this,function(){return(function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={exports:{},id:moduleId,loaded:false};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.loaded=true;return module.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.p="";return __webpack_require__(0)})([function(module,exports,__webpack_require__){'use strict';var canvas=document.createElement('canvas');canvas.width=window.innerWidth;canvas.height=window.innerHeight;canvas.style.cssText='position:fixed;top:0;left:0;pointer-events:none;z-index:999999';window.addEventListener('resize',function(){canvas.width=window.innerWidth;canvas.height=window.innerHeight});document.body.appendChild(canvas);var context=canvas.getContext('2d');var particles=[];var particlePointer=0;POWERMODE.shake=true;function getRandom(min,max){return Math.random()*(max-min)+min}function getColor(el){if(POWERMODE.colorful){var u=getRandom(0,360);return'hsla('+getRandom(u-10,u+10)+', 100%, '+getRandom(50,80)+'%, '+1+')'}else{return window.getComputedStyle(el).color}}function getCaret(){var el=document.activeElement;var bcr;if(el.tagName==='TEXTAREA'||(el.tagName==='INPUT'&&el.getAttribute('type')==='text')){var offset=__webpack_require__(1)(el,el.selectionStart);bcr=el.getBoundingClientRect();return{x:offset.left+bcr.left,y:offset.top+bcr.top,color:getColor(el)}}var selection=window.getSelection();if(selection.rangeCount){var range=selection.getRangeAt(0);var startNode=range.startContainer;if(startNode.nodeType===document.TEXT_NODE){startNode=startNode.parentNode}bcr=range.getBoundingClientRect();return{x:bcr.left,y:bcr.top,color:getColor(startNode)}}return{x:0,y:0,color:'transparent'}}function createParticle(x,y,color){return{x:x,y:y,alpha:1,color:color,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function POWERMODE(){{var caret=getCaret();var numParticles=5+Math.round(Math.random()*10);while(numParticles--){particles[particlePointer]=createParticle(caret.x,caret.y,caret.color);particlePointer=(particlePointer+1)%500}}{if(POWERMODE.shake){var intensity=1+2*Math.random();var x=intensity*(Math.random()>0.5?-1:1);var y=intensity*(Math.random()>0.5?-1:1);document.body.style.marginLeft=x+'px';document.body.style.marginTop=y+'px';setTimeout(function(){document.body.style.marginLeft='';document.body.style.marginTop=''},75)}}};POWERMODE.colorful=false;function loop(){requestAnimationFrame(loop);context.clearRect(0,0,canvas.width,canvas.height);for(var i=0;i<particles.length;++i){var particle=particles[i];if(particle.alpha<=0.1)continue;particle.velocity.y+=0.075;particle.x+=particle.velocity.x;particle.y+=particle.velocity.y;particle.alpha*=0.96;context.globalAlpha=particle.alpha;context.fillStyle=particle.color;context.fillRect(Math.round(particle.x-1.5),Math.round(particle.y-1.5),3,3)}}requestAnimationFrame(loop);module.exports=POWERMODE},function(module,exports){(function(){var properties=['direction','boxSizing','width','height','overflowX','overflowY','borderTopWidth','borderRightWidth','borderBottomWidth','borderLeftWidth','borderStyle','paddingTop','paddingRight','paddingBottom','paddingLeft','fontStyle','fontVariant','fontWeight','fontStretch','fontSize','fontSizeAdjust','lineHeight','fontFamily','textAlign','textTransform','textIndent','textDecoration','letterSpacing','wordSpacing','tabSize','MozTabSize'];var isFirefox=window.mozInnerScreenX!=null;function getCaretCoordinates(element,position,options){var debug=options&&options.debug||false;if(debug){var el=document.querySelector('#input-textarea-caret-position-mirror-div');if(el){el.parentNode.removeChild(el)}}var div=document.createElement('div');div.id='input-textarea-caret-position-mirror-div';document.body.appendChild(div);var style=div.style;var computed=window.getComputedStyle?getComputedStyle(element):element.currentStyle;style.whiteSpace='pre-wrap';if(element.nodeName!=='INPUT')style.wordWrap='break-word';style.position='absolute';if(!debug)style.visibility='hidden';properties.forEach(function(prop){style[prop]=computed[prop]});if(isFirefox){if(element.scrollHeight>parseInt(computed.height))style.overflowY='scroll'}else{style.overflow='hidden'}div.textContent=element.value.substring(0,position);if(element.nodeName==='INPUT')div.textContent=div.textContent.replace(/\s/g,"\u00a0");var span=document.createElement('span');span.textContent=element.value.substring(position)||'.';div.appendChild(span);var coordinates={top:span.offsetTop+parseInt(computed['borderTopWidth']),left:span.offsetLeft+parseInt(computed['borderLeftWidth'])};if(debug){span.style.backgroundColor='#aaa'}else{document.body.removeChild(div)}return coordinates}if(typeof module!="undefined"&&typeof module.exports!="undefined"){module.exports=getCaretCoordinates}else{window.getCaretCoordinates=getCaretCoordinates}}())}])});

在HTML页面中引入该activate-power-mode.js文件和代码：

<script src="static/js/activate-power-mode.js"></script>
<script>
POWERMODE.colorful = true; // ture 为启用礼花特效
POWERMODE.shake = false; // false 为禁用震动特效
document.body.addEventListener('input', POWERMODE);
</script>

实现切换背景皮肤效果

HTML代码：

1	<button class="btnpf" onclick="myFunction()">皮肤切换</button>

CSS代码：

/*切换背景皮肤*/
.dark-mode {
  background: url(https://s3.ax1x.com/2020/12/16/r1XxzR.jpg);
  background-size: unset;
}

.btnpf {
	background-color: #26e1be;
	padding: 0 8px;
	margin: 2px 1px;
	border-radius: 8px;
	line-height: 32px; /* 高度 */
	border-width: 0px; /* 边框宽度 */
	cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
	outline: none; /* 不显示轮廓线 */
	font-family: Microsoft YaHei; /* 设置字体 */
	color: white; /* 字体颜色 */
	font-size: 14px; /* 字体大小 */

}

JS代码：

// 切换背景皮肤
function myFunction() {
   var element = document.body;
   element.classList.toggle("dark-mode");
}

注意：其中CSS代码是根据自己想要放置网页中的位置进行调试美化的，可自行调整使用。

背景图片平铺满整个页面效果

方法一：

1	<img width="100%" height="100%" src="https://img.imgdb.cn/item/605b092c8322e6675ceac8a5.gif" style="position:absolute; left:0; top:0; z-index:-1;"/>

原理：把图片相对于浏览器决定定位，把层级设为-1之后就其他元素就显示在它上面了，比较适合登录功能的背景图平铺整个页面。

方法二：

在< body>元素中增加CSS:

1
2
3

background:url(https://img.imgdb.cn/item/605b092c8322e6675ceac8a5.gif) no-repeat;
background-size: 100% 100%;
<!-- background-size: cover; --> 看情况使用

幸运大转盘

HTML的代码：

<div class="wrapper">
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="light"></div>
    <div class="panel">
      <div class="sector">
        <div class="sector-inner">
          <span>谢谢参与</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span> 导航网站</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>谢谢参与</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>科学翻墙</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span> 博客网站</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>谢谢参与</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>影视会员</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>谢谢参与</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>音乐会员</span>
        </div>
      </div>
      <div class="sector">
        <div class="sector-inner">
          <span>微信小程序</span>
        </div>
      </div>
      <div class="pointer">开始抽奖</div>
    </div>
	<div class="result"></div>
  </div>

CSS代码：

* { /** 重置默认样式 **/
      margin: 0;
      padding: 0;
      border: none;
      outline: none;
      user-select: none;
    }
    .wrapper {
      position: absolute;
	  top: 260px;
	  right: 30px;
      height: 200px;
      width: 200px;
      padding: 20px;
      margin: 20px;
      background-color: #ff5555;
      box-shadow: #000000 0px 0px 10px;
      border-radius: 50%;
    }
    .light {
      position: absolute;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      top: 5px;
      left: 115px;
      transform-origin: 5px 115px;
    }
    .light-twinkling {
      animation: 1s twinkling 3, 100ms 3s twinkling 3;
    }
    .light:nth-child(2n) {
      background-color: #fafce7;
    }
    .light:nth-child(2n+1) {
      background-color: #ffe58b;
    }
    .light:nth-child(2) {
      transform: rotate(36deg);
    }
    .light:nth-child(3) {
      transform: rotate(72deg);
    }
    .light:nth-child(4) {
      transform: rotate(108deg);
    }
    .light:nth-child(5) {
      transform: rotate(144deg);
    }
    .light:nth-child(6) {
      transform: rotate(180deg);
    }
    .light:nth-child(7) {
      transform: rotate(216deg);
    }
    .light:nth-child(8) {
      transform: rotate(252deg);
    }
    .light:nth-child(9) {
      transform: rotate(288deg);
    }
    .light:nth-child(10) {
      transform: rotate(324deg);
    }
    .panel {
      position: relative;
      height: 200px;
      width: 200px;
      background-color: #b7b7b7;
      border-radius: 100px;
    }
    .sector {
      position: absolute;
      left: 100px;
      top: 0px;
      width: 100px;
      height: 200px;
      font-size: 14px;
      border-radius: 0px 100px 100px 0;
      overflow: hidden;
      transform-origin: left center;
    }
    .sector:nth-child(1) {
      transform: rotate(-18deg);
    }
    .sector:nth-child(2) {
      transform: rotate(18deg);
    }
    .sector:nth-child(3) {
      transform: rotate(54deg);
    }
    .sector:nth-child(4) {
      transform: rotate(90deg);
    }
    .sector:nth-child(5) {
      transform: rotate(126deg);
    }
    .sector:nth-child(6) {
      transform: rotate(162deg);
    }
    .sector:nth-child(7) {
      transform: rotate(198deg);
    }
    .sector:nth-child(8) {
      transform: rotate(234deg);
    }
    .sector:nth-child(9) {
      transform: rotate(270deg);
    }
    .sector:nth-child(10) {
      transform: rotate(306deg);
    }
    .sector:nth-child(2n+1) .sector-inner {
      background: #fef6e0;
    }
    .sector:nth-child(2n) .sector-inner {
      background: #ffffff;
    }
    .sector-inner {
      text-align: center;
      display: block;
      width: 40px;
      padding: 5px 3px 0 57px;
      height: 195px;
      transform: translateX(-100px) rotate(36deg);
      transform-origin: right center;
      border-radius: 100px 0 0 100px;
    }
    .sector-inner span {
      display: block;
      transform-origin: center;
      transform: rotate(-19deg);
      color: #d46854;
    }
    .pointer {
      position: absolute;
      left: 79px;
      top: 79px;
      z-index: 10;
      height: 30px;
      width: 30px;
      padding: 6px;
      color: #fff899;
      line-height: 15px;
      font-size: 12px;
      text-align: center;
      background-color: #ff5350;
      border-radius: 50%;
      border: 1px solid #ff5350;
      transition: transform 3s cubic-bezier(.2,.93,.43,1);
    }
    .pointer::after {
      content: '';
      position: absolute;
      left: 14px;
      top: -24px;
      border-width: 12px 6px;
      border-style: solid;
      border-color: transparent;
      border-bottom-color: #ff5350;
      transform-origin: center;
    }
    .result {
     margin:30px;
    }

    @keyframes twinkling {
      50% { background: transparent; }
    }

JS代码：

let getEle = document.getElementsByClassName.bind(document);
    let pointer = getEle('pointer')[0];
    let result = getEle('result')[0];
    let lights = Array.prototype.slice.call(getEle('light'));

    let onRotation = false; // 记录当前是否正在旋转，如果正在旋转，就不能继续点击了
    let reward = ['谢谢参与', '导航网站制作名额', '谢谢参与', '免费科学翻墙账号', '博客网站制作名额', 
    '谢谢参与', '影视会员解析名额', '谢谢参与', 'VIP音乐平台整合', '微信小程序制作名额'];

    // 根据随机角度获取奖励
    let getReward = (function() {
      currentDeg = 0;
      return function() {
        // 转三圈到四圈
        let rotateDeg = Math.random() * 360 + 1080;
        currentDeg += rotateDeg;
        let rewardText = reward[Math.floor((currentDeg + 18) % 360 / 36)]
        return {
          deg: currentDeg,
          text: rewardText === '谢谢参与' ? '很遗憾，您没有获得奖品(⊙o⊙)哦！' : '恭喜获得: ' + rewardText
        }
      }
    })();

    pointer.addEventListener('click', () => {
      if (onRotation) return;
      console.log('开始抽奖');
      onRotation = true;
      lights.forEach(light => { light.className += ' light-twinkling'; });
      let nextStatus = getReward();
      console.log(nextStatus)
      result.innerText = nextStatus.text;
      result.style.display = 'none';
      pointer.style.transform = `rotateZ(${nextStatus.deg}deg)`;
    })
    pointer.addEventListener('transitionend', () => {
      console.log('抽奖结束');
      setTimeout(() => { // 等闪烁三下结束
        onRotation = false;
        lights.forEach(light => { light.className = 'light'; });
        result.style.display = 'block';
      }, 300);
    })

悬挂猫(上吊猫)置顶插件

<!-- 上吊猫置顶效果 -->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/fsh001/szgotop.js"></script>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/fsh001/szgotop.css" />
<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -999px;"></div>

右下角图片置顶效果

Html代码：

1
2
3

 <!-- 右下角图片置顶效果 -->
<div id="fixedBar" class="back-to-top load">
</div>

CSS代码：

/* 右下角图片置顶效果 */
.back-to-top {
  position: fixed;
  z-index: 2;
  bottom: 0;
  width: 108px;
  height: 150px;
  background: url("../img/back-to-top.png") no-repeat 0 0;
  background-size: 108px 450px;
  opacity: 0.6;
  transition: opacity 0.3s, right 0.8s;
}
.back-to-top:hover {
  background-position: 0 -150px;
  opacity: 1;
}
.back-to-top.load {
  right: 0;
}

.back-to-top::after {
  content: '';
  position: fixed;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: 108px;
  height: 150px;
  background: url("../img/back-to-top.png") no-repeat 0 0;
  background-size: 108px 450px;
  background-position: 0 -300px;
  transition: opacity 0.3s;
  opacity: 0;
  pointer-events: none;
}

JS代码：

<!-- 置顶js代码必须单独放在html中，否则不起作用 -->
$(window).scroll(function() {
           if($(window).scrollTop() >= 300){
               $('#fixedBar').fadeIn(600);
           }else{
               $('#fixedBar').fadeOut(600);
           }
       });
       $('#fixedBar').click(function() {
           $('html,body').animate({scrollTop:'0px'},800);
       })

实现气泡对话框

CSS代码：

/* 实现气泡对话框效果 */
.test{
    width:145px;
    padding:50px 40px;
    background:#beceeb;
    -webkit-border-top-left-radius:220px 120px;
    -webkit-border-top-right-radius:220px 120px;
    -webkit-border-bottom-right-radius:220px 120px;
    -webkit-border-bottom-left-radius:220px 120px;
    -moz-border-radius:220px / 120px;
    border-radius:220px / 120px;
    position:absolute;
	top: 60px;
	left: 110px;
}
.test span{width:0; height:0; font-size:0; background:#beceeb; overflow:hidden; position:absolute;}
.test span.bot{
    width:30px;
    height:30px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    left:10px;
    bottom:-20px;
}
.test span.top{
    width:15px;
    height:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    left:5px;
    bottom:-40px;
}

Html代码：

<!-- 实现气泡对话框效果 -->
<div class="test">
    <span class="bot"></span>
    <span class="top"></span>
    一起来玩贪吃蛇吧！
</div>

水波纹波动动画效果

代码已经上传到蓝奏云，可以直接下载使用。

水波纹插件下载

更多样式需要自行修改代码使用。

更多样式下载

魔方效果

Html代码：

<div class="mofang">
<div class="cube">
<div class="front"><a href="javascript:void(0);" rel="nofollow">维护正义</a></div>
<div class="back"><a href="javascript:void(0);" rel="nofollow">人人有责</a></div>
<div class="right"><a href="javascript:void(0);" rel="nofollow">打击盗版</a></div>
<div class="left"><a href="javascript:void(0);" rel="nofollow">人人有责</a></div>
<div class="top"><a href="javascript:void(0);" rel="nofollow">忠于初心</a></div> 
<div class="bottom"><a href="javascript:void(0);" rel="nofollow">人人有责</a></div> 
</div> 
</div>

CSS代码：

<!--网站底部魔方效果-->
.mofang{width:60px;height:60px;margin:0 auto;position:fixed;z-index:999;-webkit-perspective:1000px;perspective:1000px;right:0;bottom:0;-webkit-transform:translate(-80%,-80%);transform:translate(-80%,-80%);margin-right: 50px;}
.cube{width:100%;height:100%;position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateX(-15deg) rotateY(-20deg) translateZ(-100px);transform:rotateX(-15deg) rotateY(-20deg) translateZ(-100px);-webkit-transform-origin:center center -100px;transform-origin:center center -100px;-webkit-animation:around 5s cubic-bezier(.94,-.6,.45,1.31) infinite;animation:around 5s cubic-bezier(.94,-.6,.45,1.31) infinite}
.cube div{width:80px;height:80px;display:block;margin:0;position:absolute}
.cube div a{color:#fff;text-decoration:none;text-align:center;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);line-height:normal;font-size:16px;letter-spacing:3px}
.cube .front{-webkit-transform:rotateY(0) translateZ(40px);transform:rotateY(0) translateZ(40px);background-color:rgba(0,191,255,.7);border:2px solid rgba(0,191,255,.7)}
.cube .back{-webkit-transform:rotate(180deg) rotateY(-0deg) rotateX(-180deg) translateZ(40px);transform:rotate(180deg) rotateY(-0deg) rotateX(-180deg) translateZ(40px);background-color:rgba(124,252,0,.7);border:2px solid rgba(124,252,0,.7);}
.cube .left{-webkit-transform:rotateY(-90deg) translateZ(40px);transform:rotateY(-90deg) translateZ(40px);background-color:rgba(255,215,0,.7);border:2px solid rgba(255,215,0,.7)}
.cube .right{-webkit-transform:rotateY(90deg) translateZ(40px);transform:rotateY(90deg) translateZ(40px);background-color:rgba(255,69,0,.7);border:2px solid rgba(255,69,0,.7);}
.cube .top{-webkit-transform:rotateX(90deg) translateZ(40px);transform:rotateX(90deg) translateZ(40px);background-color:rgba(255,0,157,.7);border:2px solid rgba(255,0,157,.7)}
.cube .bottom{-webkit-transform:rotateX(-90deg) translateZ(40px);transform:rotateX(-90deg) translateZ(40px);background-color:rgba(184,111,220,.7);border:2px solid rgba(184,111,220,.7);}
@-webkit-keyframes around{100%{-webkit-transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px);transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px)}
}
@keyframes around{100%{-webkit-transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px);transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px);}
}

侧边悬浮打赏功能

代码放在< /body>之前：

<!-- 侧边悬浮打赏功能 -->
<script src="static/js/Reward.js"></script>
   <script>  
   new tctip({
     top: '20%',
     button: {
       id: 9,
       type: 'dashang',
     },
     list: [
       {
         type: 'alipay',
         qrImg: 'https://s1.ax1x.com/2020/06/09/t4czVK.th.jpg'
       }, {
         type: 'wechat',
         qrImg: 'https://s1.ax1x.com/2020/06/09/t40mLD.th.png'
       }
     ]
   }).init()
   </script>

Reward.js下载

呼吸灯效果

CSS代码：

/*呼吸灯效果*/
.box-full {
	border-radius: 50%;
	animation: light 4s ease-in-out infinite;
	transition: .5s;
}

@keyframes light {
	0% {
		box-shadow: 0 0 4px #ca00ff
	}

	25% {
		box-shadow: 0 0 16px #00b5e5
	}

	50% {
		box-shadow: 0 0 4px #00f
	}

	75% {
		box-shadow: 0 0 16px #b1da21
	}

	100% {
		box-shadow: 0 0 4px #f00
	}
}

然后将class类box-full引入到需要的地方即可。给边框或图片增加一点色彩。

浮动公告栏

Html代码：

/* 浮动公告栏 */
<div id="float_box" class="float_box" align="middle" onmouseover="window.clearInterval(interval)" onmouseout="interval = window.setInterval('changePos()', delay)" style="top: 22px; visibility: visible; left: 1088px;">
	<div class="list-title" onclick="closeBox()">
	<span class="title-text">
	<span>关闭</span>
	</span>
	</div>
    <div id="float_box_content" class="float_box_content">
        <marquee class="float_box_content_text" direction="right">欢迎光临小康私维空间站 ^_^</marquee>
        <br><img src="https://s3.ax1x.com/2021/02/25/yx9Rwd.gif" class="float_box_content_img">
    </div>
</div>

CSS代码：

/* 浮动公告栏 */
.float_box {
  position: absolute;
  z-index: 1000;
  left: 0;
  top: 0;
}
.float_box_close {
  CURSOR: hand;
  /* color: #f00; */
  font-weight: bold;
  font-size: 14px;
  /* background-color: #80ffff; */
  width: 20%;
  border-radius: 20px;
}
.float_box_content {
  /* border: 2px dashed #46a3ff; */
  margin: 0 auto;
  padding: 7px;
  /* background: #bebebe; */
}
.float_box_content_text {
  margin-top: 7px;
  font-size: 16px;
  white-space: nowrap;
  display: inline-block;
  color: #00bfff;
  font-weight: bold;
  text-shadow: #2c3e50 1px 0px 0px, #2c3e50 0px 1px 0px, #2c3e50 -1px 0px 0px, #2c3e50 0px -1px 0px;
  overflow: hidden;
  border-right: 15px solid #ffab00;
  animation: moving 2s ease 300ms infinite;
  border-radius: 10px;
}
.float_box_content_img {
  width: 220px;
  height: 125px;
  margin-top: 12px;
}

@-moz-keyframes moving {
  from {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.5);
  }
  100% {
    transform: scaleY(1);
  }
}
@-webkit-keyframes moving {
  from {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.5);
  }
  100% {
    transform: scaleY(1);
  }
}
@-o-keyframes moving {
  from {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.5);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes moving {
  from {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.5);
  }
  100% {
    transform: scaleY(1);
  }
}

/* 关闭黄条样式 */
.list-title {
    text-align: center;
    margin-top: -37px;
    margin-bottom: 7px;
}

.list-title .title-text:before {
    content: "";
    width: 34px;
    height: 24px;
    display: block;
    position: absolute;
    left: 56px;
    top: -25px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNCIgaGVpZ2h0PSIyNCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMTA0IiB5MT0iMTUzNCIgeDI9IjEzOCIgeTI9IjE1MzQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmFiMDAiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNlNjZjMDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSJNMTA0IDE1MjJoMzR2MjRoLTM0bDYtMTJ6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTA0IC0xNTIyKSIgZmlsbD0idXJsKCNhKSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PHBhdGggZD0iTTI1IDE4bDkgNlYwaC05djE4eiIgZmlsbD0iI2IzNTQwMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);
}
.list-title .title-text:after {
    content: "";
    width: 34px;
    height: 24px;
    display: block;
    position: absolute;
    right: 56px;
    top: -25px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNCIgaGVpZ2h0PSIyNCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMjUzIiB5MT0iMTUzNCIgeDI9IjIxOSIgeTI9IjE1MzQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmFiMDAiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNlNjZjMDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSJNMjUzIDE1MjJoLTM0djI0aDM0bC02LTEyeiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxOSAtMTUyMikiIGZpbGw9InVybCgjYSkiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik05IDE4bC05IDZWMGg5djE4eiIgZmlsbD0iI2IzNTQwMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);
}

.list-title .title-text span {
    position: relative;
    display: inline-block;
    border-radius: 5px 5px 2px 2px;
    height: 30px;
    padding: 0 25px;
    line-height: 30px;
    color: #fff;
    text-shadow: 0 -1px var(--primary_dark_1);
    background: linear-gradient(90deg,#ff861a,#ffab00,#ff861a);
    z-index: 1;
    white-space: nowrap;
    box-shadow: 0 10px 10px rgb(0 4 10 / 30%);
}

Js代码：

<!-- 一定要放在尾部浮动公告栏才能起作用 -->
float_box = document.getElementById("float_box");
var xPos = document.body.clientWidth;
var yPos = 0;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;

float_box.style.top = yPos;

function closeBox() {
    clearInterval(interval);
    float_box.style.visibility = 'hidden';
}

function changePos() {
    width = document.body.clientWidth;
    height = document.body.clientHeight;
    Hoffset = float_box.offsetHeight;
    Woffset = float_box.offsetWidth;
    float_box.style.left = xPos + document.body.scrollLeft+'px';
    float_box.style.top = yPos + document.body.scrollTop+'px';


    if (yon) {
        yPos = yPos + step;
    }
    else {
        yPos = yPos - step;
    }
    if (yPos < 0) {
        yon = 1;
        yPos = 0;
    }
    if (yPos >= (height - Hoffset)) {
        yon = 0;
        yPos = (height - Hoffset);
    }
    if (xon) {
        xPos = xPos + step;
    }
    else {
        xPos = xPos - step;
    }
    if (xPos < 0) {
        xon = 1;
        xPos = 0;
    }
    if (xPos >= (width - Woffset)) {
        xon = 0;
        xPos = (width - Woffset);
    }
}

function start() {
    float_box.style.visibility = "visible";
    interval = setInterval('changePos()', delay);
}

start();

诺兰音乐播放器

<!-- 添加诺兰网播放器 -->
<link rel="stylesheet" type="text/css" href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="music" key="601d2e8e6ab7b" api="https://music.918xw.cn"></div>
<script id="xplayer" src="https://music.918xw.cn/Static/player2/js/player.js" ></script>

梨花带雨播放器

1
2
3

<!-- 梨花带雨播放器 -->
<link rel="stylesheet" type="text/css" href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="music" key="5fd3082fcfd27" api="https://music.xingyaox.com"></div><script id="xplayer" src="https://music.xingyaox.com/api/PlayerJs/id/5fd3082fcfd27" ></script>

节日主题小挂件

Html:

<!-- 春节主题 按钮 -->
<a onclick="switchThemes()" id="switchspring">
    <img class="chunjiepic" src="https://img.imgdb.cn/item/604a17545aedab222c308691.png" title="节日主题">
</a>
<!-- 圣诞老人 小挂件 -->
<div class="caishendeng">  
<!-- 圣诞老人-->  
    <div class="caishenxian">
        <img class="caishenpic lala" src="https://img.imgdb.cn/item/604a17775aedab222c30af59.png">
    </div> 
<!-- 福袋仙 -->
	<div class="caishenxian fudaixian">
		<img class="caishenpic fudai" src="https://img.imgdb.cn/item/604a2bdc5aedab222c4501c0.png">
	</div> 
</div>

CSS:

/*春节模式 */
#switchspring {
    background: #e7510a;
    width: 38px;
    height: 2px;
    display: block;
    position: fixed;
    border-radius: 50%;
    right: 15px;
    bottom: 240px;
    padding-top: 15px;
    margin-bottom: 0;
    z-index: 998;
    cursor: pointer;
}
.chunjiepic {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	position: absolute;
	bottom: 7px;
}
/*春节主题 挂件吊线*/
.caishenxianleft {
	left: 16%!important;
	position: absolute;
	top: 0px;
	width: 2px;
	height: 20px;
	background: #dc8f03;
	transform-origin: 50% -100px;
	animation: swing 3.5s infinite ease-in-out;
	-webkit-transform-origin: 50% -100px;
	-webkit-animation: swing 3.5s infinite ease-in-out;
}

.guguxian {
	position: absolute;
	top: 0px;
	left: 20%;
	width: 2px;
	height: 20px;
	background: #dc8f03;
	transform-origin: 50% -100px;
	animation: swing 3.5s infinite ease-in-out;
	-webkit-transform-origin: 50% -100px;
	-webkit-animation: swing 3.5s infinite ease-in-out;
}
.wenzhangxian {
	left: 50%!important;
	z-index: 998;
}
/*春节主题 挂件*/
.caishenxian {
	position: absolute;
	top: 0px;
	right: 20%;
	width: 2px;
	height: 20px;
	background: #dc8f03;
	transform-origin: 50% -100px;
	animation: swing 3.5s infinite ease-in-out;
	-webkit-transform-origin: 50% -100px;
	-webkit-animation: swing 3.5s infinite ease-in-out;
}

.caishenpic {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	position: absolute;
	top: 12px;
	right: -22px;
	z-index: 9;
	/* transform-origin: 50% -100px; */
	animation: swing 3.5s infinite ease-in-out;
	/* -webkit-transform-origin: 50% -100px; */
	-webkit-animation: swing 3.5s infinite ease-in-out;
}
/* 圣诞老人 */
.lala {
	width: 32px!important;
	height: 32px!important;
	opacity: 1!important;
	left: -4px!important;
	top: 14px!important;
}

/* 福袋仙 */
.fudaixian {
    left: 30%!important;
}

.fudai {
	top: 14px!important;
	left: -22px!important;
}



.chunp {
	width: 216px!important;
	height: 96px!important;
	left: -80px!important;
	top: 6px!important;
}
.fudao {
	width: 38px;
	height: 38px;
	top: 18px!important;
	left: -19px!important;
}
/* 点击显示或者隐藏总样式开始 */
.caishendeng,
.xiaomaozitx,
.labelmz,
.friendmz
{
	display: none;
}
body.themespring .caishendeng,
body.themespring .xiaomaozitx,
body.themespring .labelmz,
body.themespring .friendmz
{
	display: block;
}
/* 点击显示或者隐藏总样式结束 */
.toupic {
	position: relative;
}
.xiaomaozitx {
	width: 60px;
	height: 60px;
	position: absolute;
	top: -127px;
	right: 25%;
	transform: rotate(40deg);
	position: absolute;
	z-index: 99;
	-webkit-animation: mzanimate 1.2s infinite ease-in-out;
}
.labelmz {
	width: 34px;
	height: 34px;
	position: absolute;
	top: 7px;
	right: -84px;
	transform: rotate(40deg);
	position: absolute;
	z-index: 99;
	-webkit-transform-origin: 50% -100px;
	-webkit-animation: mzanimate 1.8s infinite ease-in-out;
}
.weilemz {
	position: relative;
}
.friendmz {
	width: 50px!important;
	height: 50px!important;
	position: absolute;
	top: 8px;
	right: -90px;
	transform: rotate(44deg);
	position: absolute;
	z-index: 99;
	-webkit-transform-origin: 50% -100px;
	-webkit-animation: mzanimate 1.8s infinite ease-in-out;
}
.lions {
	width: 32px!important;
	height: 32px!important;
	opacity: 1!important;
	left: -15px!important;
	top: 14px!important;
}
.fenleiss {
	position: absolute;
	top: -64px;
	left: 20%;
	width: 2px;
	height: 20px;
	background: #dc8f03;
	transform-origin: 50% -100px;
	animation: swing 3.5s infinite ease-in-out;
	-webkit-transform-origin: 50% -100px;
	-webkit-animation: swing 3.5s infinite ease-in-out;
}
.gugus {
	width: 32px!important;
	height: 32px!important;
	opacity: 1!important;
	left: -15px!important;
	top: 9px!important;
}
.huadengpic {
	width: 40px!important;
	height: 40px!important;
	opacity: 1!important;
	left: -18px!important;
	top: 9px!important;
}
.shanzipic {
	width: 40px!important;
	height: 40px!important;
	opacity: 1!important;
	left: -18px!important;
	top: 18px!important;
}

.denglong {
	display: none;
}
body.themespring .denglong {
	display: block;
}
@media only screen and (min-width: 1124px) {
	.nav-menu {
		padding-right: 0px;
	}
	body.themespring .nav-menu {
		padding-right: 96px;
	}
}
@media only screen and (max-width: 760px) {
	.deng-box, .deng-box1 {
		width: 40%;
	}
	body.themespring .right {
		float: left!important;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.right {
		float: left!important;
	}
}
.deng-box {
	position: fixed;
	top: -40px;
	right: -20px;
	z-index: 999;
}
.deng-box1 {
	position: fixed;
	top: -30px;
	right: 10px;
	z-index: 999;
}
.deng-box1 .deng {
	position: relative;
	width: 120px;
	height: 90px;
	margin: 50px;
	background: #d8000f;
	background: rgba(216, 0, 15, 0.8);
	border-radius: 50% 50%;
	-webkit-transform-origin: 50% -100px;
	-webkit-animation: swing 5s infinite ease-in-out;
	box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng {
	position: relative;
	width: 120px;
	height: 90px;
	margin: 50px;
	background: #d8000f;
	background: rgba(216, 0, 15, 0.8);
	border-radius: 50% 50%;
	-webkit-transform-origin: 50% -100px;
	-webkit-animation: swing 3s infinite ease-in-out;
	box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng-a {
	width: 100px;
	height: 90px;
	background: #d8000f;
	background: rgba(216, 0, 15, 0.1);
	margin: 12px 8px 8px 10px;
	border-radius: 50% 50%;
	border: 2px solid #dc8f03;
}
.deng-b {
	width: 45px;
	height: 90px;
	background: #d8000f;
	background: rgba(216, 0, 15, 0.1);
	margin: -4px 8px 8px 26px;
	border-radius: 50% 50%;
	border: 2px solid #dc8f03;
}
.xian {
	position: absolute;
	top: -20px;
	left: 60px;
	width: 2px;
	height: 20px;
	background: #dc8f03;
}
.shui-a {
	position: relative;
	width: 5px;
	height: 20px;
	margin: -5px 0 0 59px;
	-webkit-animation: swing 4s infinite ease-in-out;
	-webkit-transform-origin: 50% -45px;
	background: #ffa500;
	border-radius: 0 0 5px 5px;
}
.shui-b {
	position: absolute;
	top: 14px;
	left: -2px;
	width: 10px;
	height: 10px;
	background: #dc8f03;
	border-radius: 50%;
}
.shui-c {
	position: absolute;
	top: 18px;
	left: -2px;
	width: 10px;
	height: 35px;
	background: #ffa500;
	border-radius: 0 0 0 5px;
}
.deng:before {
	position: absolute;
	top: -7px;
	left: 29px;
	height: 12px;
	width: 60px;
	content: " ";
	display: block;
	z-index: 999;
	border-radius: 5px 5px 0 0;
	border: solid 1px #dc8f03;
	background: #ffa500;
	background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng:after {
	position: absolute;
	bottom: -7px;
	left: 10px;
	height: 12px;
	width: 60px;
	content: " ";
	display: block;
	margin-left: 20px;
	border-radius: 0 0 5px 5px;
	border: solid 1px #dc8f03;
	background: #ffa500;
	background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-t {
	font-family: 华文行楷;
	font-size: 26px;
	color: #dc8f03;
	font-weight: bold;
	line-height: 44px;
	text-align: center;
}
.night .deng-t,
.night .deng-box,
.night .deng-box1 {
	background: transparent !important;
}
@-moz-keyframes swing {
	0% {
			-moz-transform: rotate(-10deg)
	}
	50% {
		-moz-transform: rotate(10deg)
	}
	100% {
			-moz-transform: rotate(-10deg)
	}
}
@-webkit-keyframes swing {
	0% {
			-webkit-transform: rotate(-10deg)
	}
	50% {
			-webkit-transform: rotate(10deg)
	}
	100% {
			-webkit-transform: rotate(-10deg)
	}
}

JS代码：

// 节日主题切换
if (localStorage.getItem('themespring') === '1') {
	document.body.classList.add('themespring');
	}
	else if (matchMedia('(prefers-color-scheme: themespring)').matches) {
	document.body.classList.add('themespring');
}

function switchThemes() {
	var body = document.body;
	if(body.classList.contains('themespring')){
	  document.body.classList.remove('themespring');
	  localStorage.setItem('themespring','0');
	  return;
	} else {
	  document.body.classList.add('themespring');
	  localStorage.setItem('themespring','1');
	  return;
	}
  };

用bat脚本加密文件夹

cls
@ECHO OFF
title Folder Private
if EXIST "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" goto UNLOCK
if NOT EXIST Private goto MDLOCKER
:CONFIRM
echo Are you sure you want to lock the folder(Y/N)
set/p "cho=>"
if %cho%==Y goto LOCK
if %cho%==y goto LOCK
if %cho%==n goto END
if %cho%==N goto END
echo Invalid choice.
goto CONFIRM
:LOCK
ren Private "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
attrib +h +s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
echo Folder locked
goto End
:UNLOCK
echo Enter password to unlock folder
set/p "pass=>"
if NOT %pass%== 你的密码 goto FAIL
attrib -h -s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
ren "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" Private
echo Folder Unlocked successfully
goto End
:FAIL
echo Invalid password
goto end
:MDLOCKER
md Private
echo Private created successfully
goto End
:End

透明窗口样式代码

<style>
	/*透明窗口样式*/
	.sidenav {
		-webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
		box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
		width: 300px;
		height: 300px;
		background: url(https://img.imgdb.cn/item/604822065aedab222c050382.png) no-repeat;
		background-size: contain;
		float:left;
	}
	</style>
<div class="sidenav"></div>

网站添加滚动文字

代码示例说明：

<!-- // 1、来回滚动 -->
<marquee behavior=" alternate "><font color=red>文字来回滚动 </marquee>
<!-- // 2、设置滚动次数，这里已三次为例 -->
<marquee loop=3 width=50% behavior=scroll>文字只走３趟 </marquee>
<!-- // 3、设置滚动方向，left是文字自右向左移，right是文字自左向右移 -->
<marquee direction=left>文字自右向左移</marquee>
<!-- // 4、设置滚动频率 -->
<marquee scrollamount=8>
文字很快滚。
</marquee>

调整后滚动字幕代码如下：

<marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount=8  behavior="alternate">
				<strong>
					<img src="https://www.solaryyds.com/images/trumpet.png" width="23px" height="23px">
					<font size="3">
					<font style="color:#e65a08;">官人里边请~</font>
					<font style="color:#f0f;">如果官人遇到任何问题,</font>
					<font style="color:#0f0;">请联系站长哦!</font> QQ
					<font style="color:#f00;">2549315545</font>(ノ◕ω◕)ノ
					</font>
				</strong>
			</marquee>

调皮的小球人

点击旋转的小球人，会沿着屏幕窗口四处乱窜，点击按钮可回归到最初的位置。以下是代码示例，喜欢折腾的伙伴可根据自己的网站自行调整和改进。

HTML代码：

1
2
3

<!-- 调皮的小球人+按钮 -->
<div id="ball"></div>
<button id="resetButton">元神归位</button>

CSS代码：

/* 调皮的小球人 */
  #ball {
    width: 100px;
    height: 100px;
    background-color: transparent;
    border-radius: 50%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-image: url('https://pic.imgdb.cn/item/604821d75aedab222c04f000.png');
    background-size: cover;
    cursor: pointer;
  }
  #resetButton {
    position: fixed;
    bottom: 110px;
    right: 5px;
    padding: 10px 20px;
    background-color: #09d3bd;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: none;
  }

JS代码：

// 调皮的小球人
document.addEventListener('DOMContentLoaded', () => {
  // 获取球和重置按钮的 DOM 元素
  const ball = document.getElementById('ball');
  const resetButton = document.getElementById('resetButton');
  
  // 获取球的直径，并初始化球的位置、速度和其他动画相关参数
  const ballDiameter = ball.clientWidth;
  // let posX = window.innerWidth - ballDiameter; // 初始横坐标位置（球靠右）
  let posX = 0; // 初始横坐标位置（球靠左）
  let posY = 0; // 初始纵坐标位置（球在顶部）
  let velocityX = 0; // 初始横向速度
  let velocityY = 2; // 初始纵向速度
  let rotation = 0; // 初始旋转角度
  const rotationSpeed = 5; // 每帧旋转的角度
  let gravity = 0.5; // 重力加速度
  let bounceFactor = 0.7; // 弹跳因子（决定反弹后的速度）
  const maxHeight = window.innerHeight / 3; // 最大高度限制（球的反弹区域）
  let isFreeMoving = false; // 标记球是否自由移动

  function bounce() {
    if (isFreeMoving) {
      // 如果球是自由移动状态，更新球的位置
      posX += velocityX;
      posY += velocityY;

      // 检测球是否碰到左右墙壁，如果碰到，则反向速度
      if (posX <= 0 || posX + ballDiameter >= window.innerWidth) {
        velocityX = -velocityX;
      }

      // 检测球是否碰到上下墙壁，如果碰到，则反向速度
      if (posY <= 0 || posY + ballDiameter >= window.innerHeight) {
        velocityY = -velocityY;
      }
    } else {
      // 如果球不是自由移动状态，模拟重力效果
      velocityY += gravity;
      posY += velocityY;

      // 如果球达到最大高度限制，则反弹并减小速度
      if (posY >= maxHeight) {
        posY = maxHeight;
        velocityY = -velocityY * bounceFactor;
      }
  
      // 如果球在顶部以上，则限制位置和速度
      if (posY < 0) {
        posY = 0;
        velocityY = 0;
      }
    }

    // 更新球的位置
    ball.style.left = `${posX}px`;
    ball.style.top = `${posY}px`;

    // 旋转球
    rotation += rotationSpeed;
    ball.style.transform = `rotate(${rotation}deg)`;

    // 请求下一帧动画
    requestAnimationFrame(bounce);
  }

  function resetPosition() {
    // 重置球的位置、速度和状态
    posX = 0;
    posY = 0;
    velocityX = 0;
    velocityY = 2;
    isFreeMoving = false;
    resetButton.style.display = 'none'; // 隐藏重置按钮
  }

  // 给球添加点击事件，点击后使球自由移动并显示重置按钮
  ball.addEventListener('click', () => {
    if (!isFreeMoving) {
      velocityX = (Math.random() - 0.5) * 20; // 随机生成横向速度
      velocityY = (Math.random() - 0.5) * 20; // 随机生成纵向速度
      isFreeMoving = true;
      resetButton.style.display = 'block'; // 显示重置按钮
    }
  });

  // 给重置按钮添加点击事件，点击后重置球的位置
  resetButton.addEventListener('click', resetPosition);

  // 初始化球的位置
  ball.style.left = `${posX}px`;
  ball.style.top = `${posY}px`;

  // 开始动画循环
  bounce();
});

文章作者: PanXiaoKang

文章链接: http://example.com/2020/04/23/%E6%AF%8F%E5%A4%A9%E4%B8%80%E4%B8%AA%E8%84%B1%E5%8F%91%E5%B0%8F%E6%8A%80%E5%B7%A7/

小技巧

打赏

微信
支付宝

HTML网页加密访问

安装 crypto-js 包

创建一个 Node.js 脚本

运行加密脚本

在HTML中展示加密内容

安全性

如何使谷歌引擎

查看已连接的wifi密码

查询大厂校招真实薪资水平

华为手机虚电如何处理

编辑网站内容

复制网站内容

百度文库VIP文档复制小技巧

VIP文档下载技巧

加密PDF如何编辑和复制

VIP视频在线解析

iframe嵌入B站视频外链

切换网页 “夜间模式”标签

开启暗黑/夜间模式

给自己网站添加音乐播放器

给网站添加全网分享按钮

给网页添加3D动态骰子

添加打字效果

随鼠标移动的动态线条特效

页面点击爱心特效

点击按钮 页面平滑至顶部/底部

添加字体闪烁(变色)特效

添加一个天气插件

添加动漫玩偶效果

Live2D的使用

添加浮动小人效果

给系统鼠标添加星星特效

美化鼠标样式

网页添加鼠标跟随样式

自动播放背景音乐

标题title切换效果

挂灯笼特效

梅花枝特效

梅花灯笼效果

枫叶飘落特效

全局自定义鼠标样式

叶子飘落特效

雪花特效

新春对联特效

跑马灯效果

点击显示文字效果

恋爱计时器

蒲公英效果

给网站添加底部波浪特效

CSS3实现文字跑马灯(流光)效果

文字跳动效果

实现输入礼花及震动特效

实现切换背景皮肤效果

背景图片平铺满整个页面效果

幸运大转盘

悬挂猫(上吊猫)置顶插件

右下角图片置顶效果

实现气泡对话框

水波纹波动动画效果

魔方效果

侧边悬浮打赏功能

呼吸灯效果

浮动公告栏

诺兰音乐播放器

梨花带雨播放器

节日主题小挂件

用bat脚本加密文件夹

透明窗口样式代码

网站添加滚动文字

调皮的小球人

安装 `crypto-js` 包

点击按钮页面平滑至顶部/底部