技术博客沐辰资源网,网站源码,教程软件分享,-QQ技巧大全-钻石皇朝-技术QQ网-QQ业务乐园-QQ国际网络 分类搜索 官网    留言板   免责声明    我要投稿   ----  
小沐博客

网站首页 好玩代码 正文

『代码』给你的网站添加愚人节彩蛋

2021-04-17 好玩代码 38 ℃ 0 评论

今天是4.1日愚人节

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

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

它的原理很简单:

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

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

直接把以下代码放进页脚文件 footer.php 里,必须放页脚才会生效!

<?php echo '<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>
'; ?>

Tags:

< 本网宣 >
如有密码均为:www.mucna.cn
仿站,论坛,博客,发卡,IDC系统,主机环境配置,logo设计,APP开发,联系下方QQ,价格低廉欢迎骚扰
本站资源软件和源码 文章大部分为网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,并向您赔礼道歉.

站长QQ:858896214 官方QQ群:579606482

猜你喜欢

本文暂时没有评论,来添加一个吧(●'◡'●)


欢迎 发表评论:

搜索
最近发表