溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×

忘記密碼？

登錄注冊×

獲取短信驗(yàn)證碼

其他方式登錄

點(diǎn)擊登錄注冊即表示同意《億速云用戶服務(wù)條款》

用戶登錄×

賬戶密碼登錄

請使用微信掃描上方二維碼

使用幫助

請求超時！

請點(diǎn)擊重新獲取二維碼

怎么用js代碼實(shí)現(xiàn)生日快樂特效

發(fā)布時間：2022-05-19 14:35:54 來源：億速云閱讀：316 作者：iii 欄目：大數(shù)據(jù)

本篇內(nèi)容介紹了“怎么用js代碼實(shí)現(xiàn)生日快樂特效”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1.js代碼運(yùn)行環(huán)境

瀏覽器(引擎)

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的動畫屬性，著這里定義動畫的名稱和持續(xù)時間，也可以用animation-delay定義動畫延時多少s播放*/
}
.button-style2 {
position:absolute;
left:68%;
animation:btn2 15s;
}
@keyframes btn1 { /*這里是對動畫的定義，我們只需要定義幾個關(guān)鍵幀，它會自動完成補(bǔ)間。*/
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選擇器，定義鼠標(biāo)滑過效果*/
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代碼實(shí)現(xiàn)生日快樂特效”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

推薦閱讀：

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

上一篇新聞：
如何用Python讀取json文件
下一篇新聞：
PHP怎么實(shí)現(xiàn)平滑關(guān)閉和重啟

猜你喜歡

AI
助
手

產(chǎn)品服務(wù)

地區(qū)劃分

專題活動

幫助支持

關(guān)于我們

售后咨詢

7*24小時在線電話：400-100-2938

7*24小時在線 QQ：800811969

關(guān)注億速云

億速云公眾號

手機(jī)網(wǎng)站二維碼