设置背景图片
模块透明度调整:
给你的网站添加一个愚人节彩蛋
首页 > 网站代码 作者:苍蓝 2018年10月23日 热度:131 字号: 评论: 0 百度未收录
时间:2018-10-23 22:45 热度:131°  评论:0 条 

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

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

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

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


它的原理很简单:

利用 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>  



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

For example

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

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

后记

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


正文到此结束
-----------------------------------------------------------------------------------------------------------------------------------------------------
苍蓝部落
-----------------------------------------------------------------------------------------------------------------------------------------------------

热门推荐

-----------------------------------------------------------------------------------------------------------------------------------------------------
二维码加载中...
版权声明:若无特殊注明,本文皆为《 苍蓝 》原创,转载请保留文章出处。
本文链接:给你的网站添加一个愚人节彩蛋 https://www.canglan.xin/post-16.html
本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗


既然没有吐槽,那就赶紧抢沙发吧!

Copyright © 2017-2018 苍蓝部落
自豪的采用
 5.3.1 驱动  主题莫小奈定制版V3.3   |
   加载速度:183.89ms  查询数据库:18
ICP备案 | 浙公网安备案| 互联网举报中心| 百度统计 | 站点地图 | sitemap


文章中出现的商标及图像版权属于其合法持有人,只供传递信息之用,非商务用途。互动交流时请遵守理性,宽容,换位思考的原则。

360安全检测 upyun网站联盟 腾讯云安全认证 知道创宇云安全
苍蓝