(别问我为什么愚人节都快过完了才发此文,趁着春色大好,今天出去旅游了才回来)
既然是愚人节,就得搞点事情[aru_22]
它的原理很简单:
利用 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>
把上面这段代码加到你的网页页脚部分就行了(记住,一定要加在页脚才会生效哦)
教程:
后记
嗯……今年的愚人节已经过完了,还是留着明年再用吧
温馨提示:
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
喜欢就支持一下吧
stovacet1年前0
In my opinion the theme is rather interesting. Give with you we will communicate in PM.