生日快乐代码js特效

在学习了不少js知识点后，如果有身边人快过生日，可以通过js代码编写出生日快乐的特效送给他。既是给别人一个惊喜，也是自身js学习的一个检验。在开始js运行时，我们要先检验下代码运行的环境是否符合，然后就生日快乐的代码展开讲解。

1.js代码运行环境

浏览器(引擎)

node(基于v8渲染js)

webview(v8引擎)

2.js生日快乐代码

<divclass="button-style1">
<ahref="Memories.html"class="lk1">
<divclass="link1">
<divclass="bt1">
我很喜欢
</div>
</div>
</a>
</div>
<divclass="button-style2">
<aclass="lk2">
<divclass="link2">
<divclass="bt1">
我不喜欢
</div>
</div>
</a>
</div>

.button-style1,.button-style2{
position:absolute;
top:41%;
opacity:1;
z-index:100;
}
.button-style1{
position:absolute;
left:20%;
animation:btn115s;/*这是CSS3的动画属性，着这里定义动画的名称和持续时间，也可以用animation-delay定义动画延时多少s播放*/
}
.button-style2{
position:absolute;
left:68%;
animation:btn215s;
}
@keyframesbtn1{/*这里是对动画的定义，我们只需要定义几个关键帧，它会自动完成补间。*/
0%{
opacity:0;
left:43.5%;
}
70%{
opacity:0;
left:43.5%;
}
100%{
opacity:1;
left:20%;
}
}
@-webkit-keyframesbtn1{/*这里是声明获取不同浏览器的支持，还有几个干脆我就懒得写了，反正我也不是给所有人写的，自己能看就行*/
0%{
opacity:0;
left:43.5%;
}
70%{
opacity:0;
left:43.5%;
}
100%{
opacity:1;
left:20%;
}
}
@keyframesbtn2{
0%{
opacity:0;
left:43.5%;
}
70%{
opacity:0;
left:43.5%;
}
100%{
opacity:1;
left:68%;
}
}
@-webkit-keyframesbtn2{
0%{
opacity:0;
left:43.5%;
}
70%{
opacity:0;
left:43.5%;
}
100%{
opacity:1;
left:68%;
}
}
.lk1,.lk2{
text-decoration:none;
font-family:MicrosoftYaHei;
color:#fff;
transition:all0.5s;
}
.link1,.link2{
width:170px;
height:60px;
border:2pxsolid#fff;
-webkit-border:1pxsolid#fff;
border-radius:30px;
font-size:23px;
text-align:center;
background:#ee9ca7;
transition:all0.8s;
}
.link2{
cursor:not-allowed;
}
.bt1,.bt2{
position:relative;
top:22%;
vertical-align:middle;
}

a.lk1:hover{/*这里使用CSS选择器，定义鼠标滑过效果*/
color:#ee9ca7;
transition:all0.5s;
}
.link1:hover{
background-color:#fff;
background-color:rgba(255,255,255,0,2);
border:2pxsolid#BBB;
transition:all0.8s;
}
a.lk2:hover{
color:#ee9ca7;
transition:all0.5s;
}
.link2:hover{
background-color:#fff;
background-color:rgba(255,255,255,0,2);
border:2pxsolid#BBB;
transition:all0.8s;
}

<divclass="section">
<divclass="ly-box01">
<divclass="ly-txt01">
<pclass="ly-stxt01">XXXXXXXXXXXXXXXXXXXXXXX</p>
<pclass="ly-stxt02">XXXXXXXXXXXXXXXXXXXXXXX</p>
<pclass="ly-stxt03">XXXXXXXXXXXXXXXXXXXXXXX</p>
<pclass="ly-stxt04">XXXXXXXXXXXXXXXXXXXXXXX</p>
<pclass="ly-stxt05">XXXXXXXXXXXXXXXXXXXXXXX</p>
</div>
<divclass="ly-txt02">
<pclass="ly-stxt06">XXXXXXXXXXXXXXXXXXXXXXX</p>
<pclass="ly-stxt07">XXXXXXXXXXXXXXXXXXXXXXX</p>
<pclass="ly-stxt08">XXXXXXXXXXXXXXXXXXXXXXX</p>
<pclass="ly-stxt09">XXXXXXXXXXXXXXXXXXXXXXX</p>
<pclass="ly-stxt10">XXXXXXXXXXXXXXXXXXXXXXX</p>
</div>
</div>
</div>

.ly-box01{
width:50px;
height:50px;
background-color:#FFF;
border-radius:25px;
position:absolute;
left:48%;
bottom:50%;
margin-bottom:50%;
overflow:hidden;
transform-origin:centerbottom;
animation:box_to_point18.5s0s,bounce2.5s18.5s;
}

@keyframesbox_to_point{
0%{
margin-bottom:50%;
width:50px;
height:50px;
border-radius:25px;
position:absolute;
left:48%;
bottom:50%;
}
10%{
margin-bottom:0;
width:50px;
height:50px;
border-radius:25px;
background-color:rgba(255,255,255,1);
position:absolute;
left:48%;
bottom:50%;
}
14%{
margin-bottom:0;
width:80%;
height:550px;
border-radius:6px;
background-color:rgba(255,255,255,0.5);
position:absolute;
left:10%;
bottom:12%;
}
96%{
margin-bottom:0;
width:80%;
height:550px;
border-radius:6px;
background-color:rgba(255,255,255,0.6);
position:absolute;
left:10%;
bottom:12%;
}
100%{
margin-bottom:0;
width:50px;
height:50px;
border-radius:25px;
background-color:rgba(255,255,255,1);
position:absolute;
left:48%;
bottom:50%;
}
}
@-webkit-keyframesbox_to_point{
0%{
margin-bottom:50%;
width:50px;
height:50px;
border-radius:25px;
position:absolute;
left:48%;
bottom:50%;
}
10%{
margin-bottom:0;
width:50px;
height:50px;
border-radius:25px;
background-color:rgba(255,255,255,1);
position:absolute;
left:48%;
bottom:50%;
}
14%{
margin-bottom:0;
width:80%;
height:550px;
border-radius:6px;
background-color:rgba(255,255,255,0.5);
position:absolute;
left:10%;
bottom:12%;
}
96%{
margin-bottom:0;
width:80%;
height:550px;
border-radius:6px;
background-color:rgba(255,255,255,0.6);
position:absolute;
left:10%;
bottom:12%;
}
100%{
margin-bottom:0;
width:50px;
height:50px;
border-radius:25px;
background-color:rgba(255,255,255,1);
position:absolute;
left:48%;
bottom:50%;
}
}
@keyframesbounce{
0%{
margin-bottom:0;
width:50px;
height:50px;
border-radius:25px;
bottom:50%;
left:48%;
}
50%{
margin-bottom:0;
left:48%;
width:50px;
height:50px;
border-radius:25px;
bottom:0;
left:48%;
}
100%{
margin-bottom:0;
width:20px;
height:20px;
border-radius:10px;
left:48%;
bottom:0;
left:20%;
}
}
@-webkit-keyframesbounce{
0%{
margin-bottom:0;
width:50px;
height:50px;
border-radius:25px;
bottom:50%;
left:48%;
}
50%{
margin-bottom:0;
left:48%;
width:50px;
height:50px;
border-radius:25px;
bottom:0;
left:48%;
}
100%{
margin-bottom:0;
width:20px;
height:20px;
border-radius:10px;
left:48%;
bottom:0;
left:20%;
}
}
/*文本*/
.ly-txt01{
position:absolute;
width:40%;
left:10%;
top:10%;
}
.ly-txt02{
position:absolute;
width:40%;
left:60%;
top:10%;
}
.ly-stxt01{
font-family:MicrosoftYaHei;
font-size:30px;
font-color:#000;
position:relative;
left:5%;
top:5%;
opacity:0;
animation:ly-stxt01_move15s;
animation-delay:3s;
-webkit-animation:ly-stxt01_move15s;
-webkit-animation-delay:3s;
}
@keyframesly-stxt01_move{
0%{opacity:0;}
8%{opacity:1;}
90%{opacity:1;}
98%{opacity:0;}
100%{opacity:0;}
}
@-webkit-keyframesly-stxt01_move{
0%{opacity:0;}
8%{opacity:0;}
90%{opacity:1;}
98%{opacity:0;}
100%{opacity:0;}
}

.ly-stxt02{
font-family:MicrosoftYaHei;
font-size:30px;
font-color:#000;
position:relative;
left:5%;
top:5%;
margin-top:-71px;
opacity:0;
animation:ly-stxt02_move15s;
animation-delay:3s;
-webkit-animation:ly-stxt02_move15s;
-webkit-animation-delay:3s;
}
@keyframesly-stxt02_move{
0%{opacity:0;margin-top:-71px;}
8%{opacity:0;margin-top:-71px;}
16%{opacity:1;margin-top:0;}
90%{opacity:1;margin-top:0;}
100%{opacity:0;margin-top:0;}
}
@-webkit-keyframesly-stxt02_move{
0%{opacity:0;margin-top:-71px;}
8%{opacity:0;margin-top:-71px;}
16%{opacity:1;margin-top:0;}
90%{opacity:1;margin-top:0;}
100%{opacity:0;margin-top:0;}
}

.ly-stxt03{
font-family:MicrosoftYaHei;
font-size:30px;
font-color:#000;
position:relative;
left:5%;
top:5%;
opacity:0;
margin-top:-71px;
animation:ly-stxt03_move15s;
animation-delay:3s;
-webkit-animation:ly-stxt03_move15s;
-webkit-animation-delay:3s;
}
@keyframesly-stxt03_move{
0%{opacity:0;margin-top:-71px;}
16%{opacity:0;margin-top:-71px;}
24%{opacity:1;margin-top:0;}
90%{opacity:1;margin-top:0;}
100%{opacity:0;margin-top:0;}
}
@-webkit-keyframesly-stxt03_move{
0%{opacity:0;margin-top:-71px;}
16%{opacity:0;margin-top:-71px;}
24%{opacity:1;margin-top:0;}
90%{opacity:1;margin-top:0;}
100%{opacity:0;margin-top:0;}
}

.ly-stxt04{
font-family:MicrosoftYaHei;
font-size:30px;
font-color:#000;
position:relative;
left:5%;
top:5%;
opacity:0;
margin-top:-71px;
animation:ly-stxt04_move15s;
animation-delay:3s;
-webkit-animation:ly-stxt04_move15s;
-webkit-animation-delay:3s;
}
@keyframesly-stxt04_move{
0%{opacity:0;margin-top:-71px;}
24%{opacity:0;margin-top:-71px;}
32%{opacity:1;margin-top:0;}
90%{opacity:1;margin-top:0;}
100%{opacity:0;margin-top:0;}
}
@-webkit-keyframesly-stxt04_move{
0%{opacity:0;margin-top:-71px;}
24%{opacity:0;margin-top:-71px;}
32%{opacity:1;margin-top:0;}
90%{opacity:1;margin-top:0;}
100%{opacity:0;margin-top:0;}
}

.ly-stxt05{
font-family:MicrosoftYaHei;
font-size:30px;
font-color:#000;
position:relative;
left:5%;
top:5%;
opacity:0;
margin-top:-71px;
animation:ly-stxt05_move15s;
animation-delay:3s;
-webkit-animation:ly-stxt05_move15s;
-webkit-animation-delay:3s;
}
@keyframesly-stxt05_move{
0%{opacity:0;margin-top:-71px;}
32%{opacity:0;margin-top:-71px;}
40%{opacity:1;margin-top:0;}
90%{opacity:1;margin-top:0;}
100%{opacity:0;margin-top:0;}
}
@-webkit-keyframesly-stxt05_move{
0%{opacity:0;margin-top:-71px;}
32%{opacity:0;margin-top:-71px;}
40%{opacity:1;margin-top:0;}
90%{opacity:1;margin-top:0;}
100%{opacity:0;margin-top:0;}
}

.ly-stxt06{
font-family:MicrosoftYaHei;
font-size:30px;
font-color:#000;
position:relative;
right:5%;
top:5%;
opacity:0;
animation:ly-stxt06_move15s;
animation-delay:3s;
-webkit-animation:ly-stxt06_move15s;
-webkit-animation-delay:3s;
}
@keyframesly-stxt06_move{
0%{opacity:0;}
40%{opacity:0;}
48%{opacity:1;}
90%{opacity:1;}
100%{opacity:0;}
}
@-webkit-keyframesly-stxt06_move{
0%{opacity:0;}
40%{opacity:0;}
48%{opacity:1;}
90%{opacity:1;}
100%{opacity:0;}
}

.ly-stxt07{
font-family:MicrosoftYaHei;
font-size:30px;
font-color:#000;
position:relative;
right:5%;
top:5%;
opacity:0;
margin-top:-71px;
animation:ly-stxt07_move15s;
animation-delay:3s;
-webkit-animation:ly-stxt07_move15s;
-webkit-animation-delay:3s;
}
@keyframesly-stxt07_move{
0%{opacity:0;margin-top:-71px;}
48%{opacity:0;margin-top:-71px;}
56%{opacity:1;margin-top:0;}
90%{opacity:1;margin-top:0;}
100%{opacity:0;margin-top:0;}
}
@-webkit-keyframesly-stxt07_move{
0%{opacity:0;margin-top:-71px;}
48%{opacity:0;margin-top:-71px;}
56%{opacity:1;margin-top:0;}
90%{opacity:1;margin-top:0;}
100%{opacity:0;margin-top:0;}
}

.ly-stxt08{
font-family:MicrosoftYaHei;
font-size:30px;
font-color:#000;
position:relative;
right:5%;
top:5%;
opacity:0;
margin-top:-71px;
animation:ly-stxt08_move15s;
animation-delay:3s;
-webkit-animation:ly-stxt08_move15s;
-webkit-animation-delay:3s;
}
@keyframesly-stxt08_move{
0%{opacity:0;margin-top:-71px;}
56%{opacity:0;margin-top:-71px;}
64%{opacity:1;margin-top:0;}
90%{opacity:1;margin-top:0;}
100%{opacity:0;margin-top:0;}
}
@-webkit-keyframesly-stxt08_move{
0%{opacity:0;margin-top:-71px;}
56%{opacity:0;margin-top:-71px;}
64%{opacity:1;margin-top:0;}
90%{opacity:1;margin-top:0;}
100%{opacity:0;margin-top:0;}
}

.ly-stxt09{
font-family:MicrosoftYaHei;
font-size:30px;
font-color:#000;
position:relative;
right:5%;
top:5%;
opacity:0;
margin-top:-71px;
animation:ly-stxt09_move15s;
animation-delay:3s;
-webkit-animation:ly-stxt09_move15s;
-webkit-animation-delay:3s;
}
@keyframesly-stxt09_move{
0%{opacity:0;margin-top:-71px;}
64%{opacity:0;margin-top:-71px;}
72%{opacity:1;margin-top:0;}
90%{opacity:1;margin-top:0;}
100%{opacity:0;margin-top:0;}
}
@-webkit-keyframesly-stxt09_move{
0%{opacity:0;margin-top:-71px;}
64%{opacity:0;margin-top:-71px;}
72%{opacity:1;margin-top:0;}
90%{opacity:1;margin-top:0;}
100%{opacity:0;margin-top:0;}
}

.ly-stxt10{
font-family:MicrosoftYaHei;
font-size:30px;
font-color:#000;
position:relative;
right:5%;
top:5%;
opacity:0;
margin-top:-71px;
animation:ly-stxt10_move15s;
animation-delay:3s;
-webkit-animation:ly-stxt10_move15s;
-webkit-animation-delay:3s;
}
@keyframesly-stxt10_move{
0%{opacity:0;margin-top:-71px;}
72%{opacity:0;margin-top:-71px;}
80%{opacity:1;margin-top:0;}
90%{opacity:1;margin-top:0;}
100%{opacity:0;margin-top:0;}
}
@-webkit-keyframesly-stxt10_move{
0%{opacity:0;margin-top:-71px;}
72%{opacity:0;margin-top:-71px;}
80%{opacity:1;margin-top:0;}
90%{opacity:1;margin-top:0;}
100%{opacity:0;margin-top:0;}
}

原文来自：https://www.py.cn