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

mengkun 18.6K 38

（别问我为什么愚人节都快过完了才发此文，趁着春色大好，今天出去旅游了才回来[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(-1, 0, 0, 1, 0, 0);  
  32.     -moz-transform: matrix(-1, 0, 0, 1, 0, 0);  
  33.     transform: matrix(-1, 0, 0, 1, 0, 0);  
  34.     -o-transform: skew(0deg, 180deg) scale(-1, 1);  
  35.     filter:progid: DXImageTransform.Microsoft.BasicImage(mirror=1);  
  36. }  
  37. </style>  

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

For example

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

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

后记

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

本文作者为mengkun，转载请注明。

发表评论 取消回复
表情 图片 链接 代码

  1. 茶茶
    茶茶 Lv 1

    嗯……我把Chrome的JavaScript关掉之后，效果就没了hhhhhh

    #23 2019-10-12 12:05 回复
  2. 一起微笑
    一起微笑 Lv 1

    nice，用起来！

    #22 2019-04-01 22:17 回复
  3. ssr
    ssr Lv 1

    嘿嘿，逗

    #21 2018-09-06 17:14 回复
  4. 明月清风
    明月清风 Lv 4

    孟坤该准备中秋节彩弹咯

    #20 2018-08-30 11:08 回复
  5. 真的00后
    真的00后 Lv 1

    @mengkun，我是一个00后，我正在做一个易语言程序，我能不能搬运你的工具箱呢

    #19 2018-07-31 21:02 回复
  6. 耗子
    耗子 Lv 1

    博主666

    #18 2018-06-26 11:42 回复
  7. 小东
    小东 Lv 1

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

    #17 2018-06-19 17:34 回复
    • mengkun
      mengkun 站长

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

      2018-06-19 19:12 回复
      • 小东
        小东 Lv 1

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

        2018-06-19 19:53 回复
      • 耗子
        耗子 Lv 1

        @小东自己修改主题目录的footer.php

        2018-06-29 20:06 回复
  8. Yuuki
    Yuuki Lv 1

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

    已加入愚人节豪华套餐~

    #16 2018-05-29 15:20 回复
  9. CodeC
    CodeC Lv 1

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

    #15 2018-04-26 11:23 回复
  10. 完美者
    完美者 Lv 5

    一朝回到解放前[aru_30]

    #14 2018-04-10 17:44 回复
  11. 北冥
    北冥 Lv 1

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

    #13 2018-04-06 14:46 回复
  12. 小灵
    小灵 Lv 3

    话说我进来就被耍了

    #12 2018-04-05 12:30 回复
  13. 阿珏
    阿珏 Lv 3

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

    #11 2018-04-05 10:36 回复
    • mengkun
      mengkun 站长

      @阿珏被你发现了[aru_159]

      2018-04-05 10:37 回复
      • 阿珏
        阿珏 Lv 3

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

        2018-04-05 10:38 回复
      • mengkun
        mengkun 站长

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

        2018-04-05 10:42 回复
  14. 266277
    266277 Lv 1

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

    #10 2018-04-05 08:40 回复
    • mengkun
      mengkun 站长

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

      2018-04-05 08:44 回复
  15. 轩泽
    轩泽 Lv 1

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

    #9 2018-04-04 23:27 回复
    • mengkun
      mengkun 站长

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

      2018-04-05 08:45 回复
      • xuanze
        xuanze Lv 1

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

        2018-04-05 18:30 回复
  16. 冷眼观世界
    冷眼观世界 Lv 1

    皮这一下就很开心

    #8 2018-04-04 19:54 回复
  17. 三岁KID
    三岁KID Lv 1

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

    #7 2018-04-04 12:03 回复
  18. 姬长信
    姬长信 Lv 1

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

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

    #6 2018-04-03 09:39 回复
    • mengkun
      mengkun 站长

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

      2018-04-03 19:46 回复
      • 姬长信
        姬长信 Lv 1

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

        2018-04-03 19:47 回复
  19. 完美者
    完美者 Lv 5

    一个人旅游，我不信

    #5 2018-04-02 15:12 回复
    • mengkun
      mengkun 站长

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

      2018-04-02 20:27 回复
  20. 小白-白
    小白-白 Lv 2

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

    #4 2018-04-02 12:05 回复
  21. 小蒋浪了
    小蒋浪了 Lv 2

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

    地板 2018-04-02 09:43 回复
  22. 野人摊的分享
    野人摊的分享 Lv 2

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

    板凳 2018-04-01 21:20 回复
  23. 杨小杰博客
    杨小杰博客 Lv 1

    成功影响到我的阅读了

    沙发 2018-04-01 18:45 回复
分享