网站添加愚人节彩蛋

每年4月1日是愚人节

这虽然不是一个国家性的节日

却在全世界引起了广泛的参与

这一天,人们都爱相互开玩笑

把玩笑当真的人

往往被称作“四月的傻瓜”

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

教程开始

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

这段代码需要加入到你的站点的页脚部分才会生效;如果是单独一篇文章的话同样如此!
<script>  
if (!wmReaddata("fool")) {  // 如果没有触发过彩蛋  
    document.body.classList.add('wm-fool-egg');     // 给 body 增加彩蛋 class  
    window.setTimeout(function () {     // 定时退出彩蛋  
        wmSavedata("fool", "fool");     // 记录彩蛋已被执行  
        alert("恭喜发现愚人节彩蛋 :)");     // 弹窗(这里可以自己发挥)  
        document.body.classList.remove('wm-fool-egg');  
    }, 5000);   // 这里的 5000 代表 5s,也就是经过 5s 后弹窗,并退出彩蛋  
}  
  
// 写入 Cookie  
function wmSavedata(key, data) {  
    key = 'wm_' + key;  
    data = JSON.stringify(data);  
    if (window.localStorage) {  
        localStorage.setItem(key, data);  
    }  
}  
  
// 读取 Cookie  
function wmReaddata(key) {  
    if (!window.localStorage) return '';  
    key = 'wm_' + key;  
    return JSON.parse(localStorage.getItem(key));  
}  
</script>  
  
<style>  
/* 彩蛋的样式代码 */  
.wm-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>  

 实现效果

转载: 孟坤博客

版权声明:
作者:微末
链接:https://www.wmxx.site/post-115.html
来源:微末小巷
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>