给你的博客加上一个愚人节彩蛋

, , ,

既然是愚人节，就得搞点事情
让你的博客页面翻转并弹出弹窗
利用 CSS 实现页面翻转，然后用 JS 定时器定时取消翻转。

废话不多说，直接上代码！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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>

把上面这段代码加到你的网页页脚部分就行了

🔰本文标题： 给你的博客加上一个愚人节彩蛋

🔞本文链接： https://193.gs/41cddj/index.html

🌡️本文总热度℃