XSY

给你的博客加上一个愚人节彩蛋
既然是愚人节,就得搞点事情让你的博客页面翻转并弹出弹窗利用 CSS 实现页面翻转,然后用 JS 定时器定时取消翻转...
扫描右侧二维码阅读全文
02
2018/04

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

既然是愚人节,就得搞点事情
让你的博客页面翻转并弹出弹窗
利用 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>

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

Last modification:April 4th, 2019 at 10:27 pm
If you think my article is useful to you, please feel free to appreciate

4 comments

  1. admin

    有意思qwq

    1. admin
      @admin

      额OωO

  2. xsy

    测试邮件发送

    1. admin
      @xsy

Leave a Comment