既然是愚人节,就得搞点事情
不知道各位有没有看到本博客的愚人节彩蛋呢
它的原理很简单:
利用 CSS 实现页面翻转,然后用 JS 定时器定时取消翻转。
废话不多说,直接上代码!
<script>
if (!mkReaddata("fool")) { // 如果没有触发过彩蛋
document.body.classList.add('mk-fool-egg'); // 给 body 增加彩蛋 class
window.setTimeout(function () { // 定时退出彩蛋
mkSavedata("fool", "fool"); // 记录彩蛋已被执行
alert("恭喜发现愚人节彩蛋 :)"); // 弹窗(这里可以自己发挥)
document.body.classList.remove('mk-fool-egg');
}, 5000); // 这里的 5000 代表 5s,也就是经过 5s 后弹窗,并退出彩蛋
}
// 写入 Cookie
function mkSavedata(key, data) {
key = 'mk_' + key;
data = JSON.stringify(data);
if (window.localStorage) {
localStorage.setItem(key, data);
}
}
// 读取 Cookie
function mkReaddata(key) {
if (!window.localStorage) return '';
key = 'mk_' + key;
return JSON.parse(localStorage.getItem(key));
}
</script>
<style>
/* 彩蛋的样式代码 */
.mk-fool-egg {
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
transform: matrix(-1, 0, 0, 1, 0, 0);
-o-transform: skew(0deg, 180deg) scale(-1, 1);
filter:progid: DXImageTransform.Microsoft.BasicImage(mirror=1);
}
</style>
把上面这段代码加到你的网页页脚部分就行了(记住,一定要加在页脚才会生效)
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。统一解压密码:www.mophp.cn 任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们!