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

Celia 262 0

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

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

    这面上白色的半透明的一层实际上是一个很大的半透明<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 赶紧将一些全部撤掉就行了😏。

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

标签: 编程 设计 事件

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~

登录
用户名
密码
注册
用户名
密码
确认密码
找回密码
用户名
邮箱
※ 重置链接将发送到邮箱