妈咪生日快乐！- 那只蛋糕是怎样做的？

妈咪生-日-快-乐~
妈咪生-日-快-乐~
妈咪生--日--快--乐~~~~
妈咪生-日-快-乐！

    大前天天是妈咪生日，我于前一天晚上十二点整在博客上贴了一只蛋糕，具体效果如下：

    这面上白色的半透明的一层实际上是一个很大的半透明 <iframe> 标签，嵌入了一个含有蛋糕和五彩纸屑的 html 文件，盖住了整个网页。具体的代码就一行：

<iframe id="birthday" src="/files/mummy_birthday/birthday.html" allowtransparency="true"/>

    src 后面带的是要嵌入的文件，allowtransparency 属性 HTML5 默认为 false，如果为 true，那么如果嵌入的文件背景是透明或是半透明的，嵌过来仍旧可以保留它的透明度。接着样式如下：

#birthday {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    width: 100%;
    height: 100vh;
    border: none;
}

    这就是在Celia的博客主页的所有代码了，现在来看看 birthday.html，也就是那个含有蛋糕和五彩纸屑的 html 文件：

    最中间的 "Happy Birthday Mummy!"，用了一个非常好玩而方便的组件，叫做 CSShake，只要给任何元素加上特定的 class，就能让它 "shake 起来“。这里，我加的是：

<h1 class="shake-slow shake-constant shake-constant--hover">Happy Birthday Mummy!</h1>

    这个效果感觉颇有活力却又不至于让人眼花缭乱。

    另一个挺有趣的组件是 confetti-js，只需要简单的设定，就可以生成五彩纸屑的效果。不久前收到 Stanford 夏校的 offer 时，发现他们的 offer 页面用的也是这个这个哦。

    先加入这个：

<script src="https://cdn.jsdelivr.net/gh/mathusummut/confetti.js/confetti.min.js"></script>

    然后再加上一个 method，括号里的 attribute 填掉彩带的时间（以毫秒为单位）

// 掉彩带五秒钟
confetti.start(5000);

    动画完毕后，一切还会自动消失，只要将要消失的元素加上 hideme 的 class 即可：

.hideMe {    
    -moz-animation: cssAnimation 0.25s ease-in 4.5s forwards;    
    /* Firefox */    
    -webkit-animation: cssAnimation 0.25s ease-in 4.5s forwards;    
    /* Safari and Chrome */ 
    -o-animation: cssAnimation 0.25s ease-in 4.5s forwards; 
    /* Opera */    
    animation: cssAnimation 0.25s ease-in 4.5s forwards;    
    -webkit-animation-fill-mode: forwards;  
    animation-fill-mode: forwards;    
}    
		
@keyframes cssAnimation {    
    to {    
        visibility: hidden; 
        opacity: 0;    
        transition: visibility 0s 0.25s, opacity 2s linear;    
    }    
}    
		
@-webkit-keyframes cssAnimation {    
    to {    
        visibility: hidden;    
        opacity: 0;    
        transition: visibility 0s 0.25s, opacity 2s linear; 
    } 
}

    就这么几部，这个要嵌入的网页就写好了。加上 <iframe> 代码，就可以在 Celia 的博客主页看到这些彩带、蛋糕和摇晃的文字了。问题来了，在显示结束后，怎样才能让那个半透明的背景消失，显示原来的页面呢？一开始，我在 Celia 的博客 主页的右上角加了一个“X”，想着用户点击后就给 #birthday 加上一个 display: none; 的样式。那个“X”大概是这样的：

<div onclick="hide()">X</div>

    而这个 hide 的 function 大概是这样的：

function hide(){    
    var style = document.createElement('style');    
    style.innerText = '#birthday{display:none;}'; 
    var head = document.getElementsByTagName('head')[0];   
    head.appendChild(style);    
}

    然而，不知是因为什么原因，这种方法就是不管用，不管怎么点这个“X”都无法激活那个我写好的 function，百般无奈，妈咪生日就快到了，只好弄一个鸡肋一点的，将“X”加在要嵌入的网页中，并在点击时触发下面这个 function：

function hide(){    
    var style = document.createElement('style');    
    style.innerText = 'html{display:none;}'; 
    var head = document.getElementsByTagName('head')[0];   
    head.appendChild(style);    
}

    细心看下，就能发现这是在是鸡肋，用户点一下后，嵌入在 Celia 的博客中的那个网站中所有元素会自动不显示。看起来，这些蛋糕文字和半透明背景的确消失了，实际上 Celia 的博客中那个 <iframe> 元素仍旧在那里，浮在所有博客中元素的上面，导致用户在点击了“X”后在博客上什么都点不到。不过既然时间不太够，这样已经 ok 了，一天之后趁大家还没发现这个 bug 赶紧将一些全部撤掉就行了😏。

    祝妈咪生日快乐啦（这个发晚了一个星期啦）。

标签： 编程 设计 事件

赞 3

微信

打赏