给你的网站添加一个愚人节彩蛋

mengkun 2,409 31

(别问我为什么愚人节都快过完了才发此文,趁着春色大好,今天出去旅游了才回来[aru_125])

既然是愚人节,就得搞点事情[aru_22]

不知道各位有没有看到本博客的愚人节彩蛋呢[aru_31]

给你的网站添加一个愚人节彩蛋

它的原理很简单:

利用 CSS 实现页面翻转,然后用 JS 定时器定时取消翻转。

废话不多说,直接上代码!

  1. <script>  
  2. if (!mkReaddata("fool")) {  // 如果没有触发过彩蛋  
  3.     document.body.classList.add('mk-fool-egg');     // 给 body 增加彩蛋 class  
  4.     window.setTimeout(function () {     // 定时退出彩蛋  
  5.         mkSavedata("fool""fool");     // 记录彩蛋已被执行  
  6.         alert("恭喜发现愚人节彩蛋 :)");     // 弹窗(这里可以自己发挥)  
  7.         document.body.classList.remove('mk-fool-egg');  
  8.     }, 5000);   // 这里的 5000 代表 5s,也就是经过 5s 后弹窗,并退出彩蛋  
  9. }  
  10.   
  11. // 写入 Cookie  
  12. function mkSavedata(key, data) {  
  13.     key = 'mk_' + key;  
  14.     data = JSON.stringify(data);  
  15.     if (window.localStorage) {  
  16.         localStorage.setItem(key, data);  
  17.     }  
  18. }  
  19.   
  20. // 读取 Cookie  
  21. function mkReaddata(key) {  
  22.     if (!window.localStorage) return '';  
  23.     key = 'mk_' + key;  
  24.     return JSON.parse(localStorage.getItem(key));  
  25. }  
  26. </script>  
  27.   
  28. <style>  
  29. /* 彩蛋的样式代码 */  
  30. .mk-fool-egg {  
  31.     -webkit-transform: matrix(-100100);  
  32.     -moz-transform: matrix(-100100);  
  33.     transform: matrix(-100100);  
  34.     -o-transform: skew(0deg, 180deg) scale(-11);  
  35.     filter:progid: DXImageTransform.Microsoft.BasicImage(mirror=1);  
  36. }  
  37. </style>  

把上面这段代码加到你的网页页脚部分就行了(记住,一定要加在页脚才会生效哦[aru_30])

For example

如果你的博客用的是 mkBlog 主题,则直接把该代码加在主题选项中的 footer 代码 输入框中即可。

给你的网站添加一个愚人节彩蛋

后记

嗯……今年的愚人节已经过完了,还是留着明年再用吧[aru_61]

打赏
发表评论
表情 图片 链接 代码

  1. 小东
    小东 Lv 1

    作者你好,可以发一下你网站插入代码的插件吗?

    • mengkun
      mengkun 站长

      @小东不是插件,是 主题 内置的功能[aru_43]

      • 小东
        小东 Lv 1

        @mengkun哦哦,那请问还有哪些好看的插入代码的东西可以分享的吗?

  2. Yuuki
    Yuuki Lv 1

    https://liam0205.me/2014/04/01/LaTeX-Pro-Git-zh/

    已加入愚人节豪华套餐~

  3. CodeC
    CodeC Lv 1

    大佬喔,工具箱那些源码有嘛!
    可以分享不[aru_148]

  4. 完美者
    完美者 Lv 4

    一朝回到解放前[aru_30]

  5. 北冥
    北冥 Lv 1

    弹窗对电脑没啥用,弹出第一个之后就可以禁用了。。。我同学就坑我来着。。[aru_2]

  6. 小灵
    小灵 Lv 2

    话说我进来就被耍了

  7. 阿珏
    阿珏 Lv 2

    皮这一下,你真的就开心吗[aru_163]
    你实验室里头就已经有了[aru_2]

    • mengkun
      mengkun 站长

      @阿珏被你发现了[aru_159]

      • 阿珏
        阿珏 Lv 2

        @mengkun差点我都以为是自动回复了[aru_15]

      • mengkun
        mengkun 站长

        @阿珏没错,本博客已加入黑科技:自动回复机器人[aru_13]

  8. 266277
    266277 Lv 1

    原谅我下载你的阿鲁表情包[aru_17]
    再原谅我还想下载贴吧微博的表情 只是文件无规律可循[wb_可爱]

    • mengkun
      mengkun 站长

      @266277表情不是开源了么……直接下载这个就行,都在里边呢[aru_59]https://mkblog.cn/1243/

  9. 轩泽
    轩泽 Lv 1

    不影响用户体验吗[aru_34][aru_34][aru_34]

    • mengkun
      mengkun 站长

      @轩泽所以加上了cookie,让这个彩蛋只会出现一次[aru_13]

      • xuanze
        xuanze Lv 1

        @mengkunhttp://lab.mkblog.cn/HTML5_Audio/ 这个的源码能不能发我邮箱里面,,谢谢了[aru_12]

  10. 冷眼观世界

    皮这一下就很开心

  11. 三岁KID
    三岁KID Lv 1

    百度BDUSS提取工具不好用了,只能自己用浏览器提取吗?

  12. 姬长信
    姬长信 Lv 1

    长期置顶】姬长信API增加宝贝回家|腾讯公益404核心数据 - 姬長信 http://www.qq.com/404/

    大佬能不能帮写篇文章推广下[aru_158]

    • mengkun
      mengkun 站长

      @姬长信还是直接用腾讯原版的比较好。界面美观无广告(链接给你改过来了[斜眼笑])

      • 姬长信
        姬长信 Lv 1

        @mengkun原版的限制性太大[aru_6]

  13. 完美者
    完美者 Lv 4

    一个人旅游,我不信

    • mengkun
      mengkun 站长

      @完美者我也没说是一个人旅游啊[aru_4]

  14. 小白-白
    小白-白 Lv 2

    [aru_13]明年整个更骚的操作

  15. 小蒋浪了
    小蒋浪了 Lv 2

    致力于找错误[aru_140] 查看图片

  16. 野人摊的分享

    这个愚人节的作品可以啊!棒棒哒

  17. 杨小杰博客

    成功影响到我的阅读了

分享
微信
微博
QQ