资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

怎么用js代码实现生日快乐特效

本篇内容介绍了“怎么用js代码实现生日快乐特效”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

成都创新互联公司服务项目包括丽江网站建设、丽江网站制作、丽江网页制作以及丽江网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，丽江网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到丽江省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

1.js代码运行环境

浏览器(引擎)

node(基于v8渲染js)

webview(v8引擎)

2.js生日快乐代码



	
		
			我很喜欢
    
我不喜欢   
.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;
}

          
            
              XXXXXXXXXXXXXXXXXXXXXXX

              XXXXXXXXXXXXXXXXXXXXXXX

              XXXXXXXXXXXXXXXXXXXXXXX

              XXXXXXXXXXXXXXXXXXXXXXX

              XXXXXXXXXXXXXXXXXXXXXXX

            
            
              XXXXXXXXXXXXXXXXXXXXXXX

              XXXXXXXXXXXXXXXXXXXXXXX

              XXXXXXXXXXXXXXXXXXXXXXX

              XXXXXXXXXXXXXXXXXXXXXXX

              XXXXXXXXXXXXXXXXXXXXXXX

            
        
      
.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代码实现生日快乐特效”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


文章标题：怎么用js代码实现生日快乐特效
链接URL：http://cdkjz.cn/article/ispceo.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都服务器托管重庆外贸网站建设微信小程序开发定制网站晟和广告品牌网站建设公司钢筋机械设备网站建设公司名片印刷合江网站建设

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图