本篇内容介绍了“怎么用js代码实现生日快乐特效”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
1.js代码运行环境
浏览器(引擎)
node(基于v8渲染js)
webview(v8引擎)
2.js生日快乐代码
<div class="button-style1"> <a href="Memories.html" class="lk1"> <div class="link1"> <div class="bt1"> 我很喜欢 </div> </div> </a> </div> <div class="button-style2"> <a class="lk2"> <div class="link2"> <div class="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:btn1 15s; /*这是CSS3的动画属性，着这里定义动画的名称和持续时间，也可以用animation-delay定义动画延时多少s播放*/
}
.button-style2 {
position:absolute;
left:68%;
animation:btn2 15s;
}
@keyframes btn1 { /*这里是对动画的定义，我们只需要定义几个关键帧，它会自动完成补间。*/
0% {
opacity:0;
left:43.5%;
}
70% {
opacity:0;
left:43.5%;
}
100% {
opacity:1;
left:20%;
}
}
@-webkit-keyframes btn1 { /*这里是声明获取不同浏览器的支持，还有几个干脆我就懒得写了，反正我也不是给所有人写的，自己能看就行*/
0% {
opacity:0;
left:43.5%;
}
70% {
opacity:0;
left:43.5%;
}
100% {
opacity:1;
left:20%;
}
}
@keyframes btn2 {
0% {
opacity:0;
left:43.5%;
}
70% {
opacity:0;
left:43.5%;
}
100% {
opacity:1;
left:68%;
}
}
@-webkit-keyframes btn2 {
0% {
opacity:0;
left:43.5%;
}
70% {
opacity:0;
left:43.5%;
}
100% {
opacity:1;
left:68%;
}
}
.lk1,.lk2 {
text-decoration:none;
font-family: Microsoft YaHei;
color:#fff;
transition:all 0.5s;
}
.link1,.link2 {
width:170px;
height:60px;
border:2px solid #fff;
-webkit-border:1px solid #fff;
border-radius:30px;
font-size: 23px;
text-align:center;
background: #ee9ca7;
transition:all 0.8s;
}
.link2 {
cursor:not-allowed;
}
.bt1,.bt2 {
position:relative;
top:22%;
vertical-align:middle;
}
a.lk1:hover { /*这里使用CSS选择器，定义鼠标滑过效果*/
color:#ee9ca7;
transition:all 0.5s;
}
.link1:hover {
background-color:#fff;
background-color:rgba(255,255,255,0,2);
border:2px solid #BBB;
transition:all 0.8s;
}
a.lk2:hover {
color:#ee9ca7;
transition:all 0.5s;
}
.link2:hover {
background-color:#fff;
background-color:rgba(255,255,255,0,2);
border:2px solid #BBB;
transition:all 0.8s;
}<div class="section"> <div class="ly-box01"> <div class="ly-txt01"> <p class="ly-stxt01">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt02">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt03">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt04">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt05">XXXXXXXXXXXXXXXXXXXXXXX</p> </div> <div class="ly-txt02"> <p class="ly-stxt06">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt07">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt08">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="ly-stxt09">XXXXXXXXXXXXXXXXXXXXXXX</p> <p class="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:center bottom;
animation:box_to_point 18.5s 0s,bounce 2.5s 18.5s;
}
@keyframes box_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-keyframes box_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%;
}
}
@keyframes bounce{
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-keyframes bounce{
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: Microsoft YaHei;
font-size: 30px;
font-color: #000;
position: relative;
left: 5%;
top: 5%;
opacity: 0;
animation:ly-stxt01_move 15s;
animation-delay:3s;
-webkit-animation:ly-stxt01_move 15s;
-webkit-animation-delay:3s;
}
@keyframes ly-stxt01_move{
0% {opacity:0;}
8% {opacity:1;}
90% {opacity:1;}
98% {opacity:0;}
100% {opacity:0;}
}
@-webkit-keyframes ly-stxt01_move{
0% {opacity:0;}
8% {opacity:0;}
90% {opacity:1;}
98% {opacity:0;}
100% {opacity:0;}
}
.ly-stxt02 {
font-family: Microsoft YaHei;
font-size: 30px;
font-color: #000;
position: relative;
left: 5%;
top: 5%;
margin-top:-71px;
opacity: 0;
animation:ly-stxt02_move 15s;
animation-delay:3s;
-webkit-animation:ly-stxt02_move 15s;
-webkit-animation-delay:3s;
}
@keyframes ly-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-keyframes ly-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: Microsoft YaHei;
font-size: 30px;
font-color: #000;
position: relative;
left: 5%;
top: 5%;
opacity: 0;
margin-top:-71px;
animation:ly-stxt03_move 15s;
animation-delay:3s;
-webkit-animation:ly-stxt03_move 15s;
-webkit-animation-delay:3s;
}
@keyframes ly-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-keyframes ly-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: Microsoft YaHei;
font-size: 30px;
font-color: #000;
position: relative;
left: 5%;
top: 5%;
opacity: 0;
margin-top:-71px;
animation:ly-stxt04_move 15s;
animation-delay:3s;
-webkit-animation:ly-stxt04_move 15s;
-webkit-animation-delay:3s;
}
@keyframes ly-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-keyframes ly-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: Microsoft YaHei;
font-size: 30px;
font-color: #000;
position: relative;
left: 5%;
top: 5%;
opacity: 0;
margin-top:-71px;
animation:ly-stxt05_move 15s;
animation-delay:3s;
-webkit-animation:ly-stxt05_move 15s;
-webkit-animation-delay:3s;
}
@keyframes ly-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-keyframes ly-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: Microsoft YaHei;
font-size: 30px;
font-color: #000;
position: relative;
right: 5%;
top: 5%;
opacity: 0;
animation:ly-stxt06_move 15s;
animation-delay:3s;
-webkit-animation:ly-stxt06_move 15s;
-webkit-animation-delay:3s;
}
@keyframes ly-stxt06_move{
0% {opacity:0;}
40% {opacity:0;}
48% {opacity:1;}
90% {opacity:1;}
100% {opacity:0;}
}
@-webkit-keyframes ly-stxt06_move{
0% {opacity:0;}
40% {opacity:0;}
48% {opacity:1;}
90% {opacity:1;}
100% {opacity:0;}
}
.ly-stxt07 {
font-family: Microsoft YaHei;
font-size: 30px;
font-color: #000;
position: relative;
right: 5%;
top: 5%;
opacity: 0;
margin-top:-71px;
animation:ly-stxt07_move 15s;
animation-delay:3s;
-webkit-animation:ly-stxt07_move 15s;
-webkit-animation-delay:3s;
}
@keyframes ly-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-keyframes ly-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: Microsoft YaHei;
font-size: 30px;
font-color: #000;
position: relative;
right: 5%;
top: 5%;
opacity: 0;
margin-top:-71px;
animation:ly-stxt08_move 15s;
animation-delay:3s;
-webkit-animation:ly-stxt08_move 15s;
-webkit-animation-delay:3s;
}
@keyframes ly-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-keyframes ly-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: Microsoft YaHei;
font-size: 30px;
font-color: #000;
position: relative;
right: 5%;
top: 5%;
opacity: 0;
margin-top:-71px;
animation:ly-stxt09_move 15s;
animation-delay:3s;
-webkit-animation:ly-stxt09_move 15s;
-webkit-animation-delay:3s;
}
@keyframes ly-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-keyframes ly-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: Microsoft YaHei;
font-size: 30px;
font-color: #000;
position: relative;
right: 5%;
top: 5%;
opacity: 0;
margin-top:-71px;
animation:ly-stxt10_move 15s;
animation-delay:3s;
-webkit-animation:ly-stxt10_move 15s;
-webkit-animation-delay:3s;
}
@keyframes ly-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-keyframes ly-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;}
}“怎么用js代码实现生日快乐特效”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
