下載本文檔
版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第js實(shí)現(xiàn)酷炫倒計(jì)時(shí)動(dòng)畫本文實(shí)例為大家分享了js實(shí)現(xiàn)酷炫倒計(jì)時(shí)動(dòng)畫的具體代碼,供大家參考,具體內(nèi)容如下
前段時(shí)間和朋友去音樂(lè)餐廳吃飯,中間有個(gè)活動(dòng),然后看到他們軟件公眾號(hào)H5有個(gè)活動(dòng)開始的倒計(jì)時(shí)的動(dòng)畫效果,于是想了下實(shí)現(xiàn)思路。
!DOCTYPEhtml
html
head
metacharset="utf-8"/
titlejs實(shí)現(xiàn)酷炫倒計(jì)時(shí)動(dòng)畫效果/title
style
*{margin:0;padding:0;}
body{width:100%;height:100%;overflow:hidden;}
.box{width:1000px;height:700px;margin:100pxauto;}
.btn{width:100px;height:100px;margin:50pxauto0;font-size:16px;color:#fff;text-align:center;line-height:100px;border-radius:100px;background:#3385ff;}
.btn:hover{box-shadow:0010px#77aeff;cursor:pointer;}
h1{font-size:300px;color:red;text-align:center;}
h1.active{animation:count.5s;}
@keyframescount{
from{
transform:scale(.1);
opacity:1;
}
to{
transform:scale(3.5);
opacity:0;
display:none;
}
}
/style
/head
body
div倒計(jì)時(shí)/div
div
h110/h1
/div
/body
script
letNUMBER=1;
letCOUNT=10;
letCOLORS=['#8c00ff','#006bff','#4fff00','#ffb800','#ff0000'];
lettimer=null;
function$(str){
returndocument.querySelector(str);
functionactionNum(){
leth1=$('h1');
$('h1').style.display='block';
timer=setInterval(()={
COUNT--;
NUMBER++;
if(COUNT=0){
h1.classList.remove('active');
setTimeout(()={
letnum=Math.floor(Math.random()*5);
h1.innerText=COUNT;
h1.style.color=COLORS[num];
h1.classList.add('active');
},100);
}else{
clearInterval(timer);
}
},1000);
$('.btn').onclick=function(){
if(COUNT0){
COUN
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- AISTEAM教學(xué)中項(xiàng)目式學(xué)習(xí)評(píng)價(jià)與學(xué)習(xí)成果展示課題報(bào)告教學(xué)研究課題報(bào)告
- 校企合作構(gòu)建人工智能教育質(zhì)量監(jiān)控體系研究教學(xué)研究課題報(bào)告
- 2025年高端無(wú)人機(jī)研發(fā)生產(chǎn)基地建設(shè)規(guī)劃可行性報(bào)告
- 全國(guó)一等獎(jiǎng)統(tǒng)編版語(yǔ)文二年級(jí)下冊(cè)《古詩(shī)二首-詠柳》公開課精美課件
- 2026年生物科技醫(yī)療健康產(chǎn)業(yè)分析報(bào)告
- 2025-2026學(xué)年廣東深圳紅嶺中學(xué)七年級(jí)上學(xué)期期中考英語(yǔ)試題
- 保險(xiǎn)代理人進(jìn)級(jí)制度
- 交警節(jié)假日值班制度
- 兩都巡幸制度
- 2026年泰和縣教育體育局所屬事業(yè)單位競(jìng)爭(zhēng)性選調(diào)工作人員的備考題庫(kù)及完整答案詳解1套
- 滑坡穩(wěn)定性評(píng)價(jià)
- TTSSP 045-2023 油茶果機(jī)械化爆蒲及油茶籽干制加工技術(shù)規(guī)程
- 部編版高一語(yǔ)文上冊(cè)期末復(fù)習(xí)現(xiàn)代漢語(yǔ)語(yǔ)法知識(shí)要點(diǎn)梳理
- GB/T 4074.4-2024繞組線試驗(yàn)方法第4部分:化學(xué)性能
- 關(guān)于澄清兩個(gè)公司無(wú)關(guān)聯(lián)關(guān)系的聲明
- JC∕T 940-2022 玻璃纖維增強(qiáng)水泥(GRC)裝飾制品
- 《兒科護(hù)理學(xué)》課件-兒童健康評(píng)估特點(diǎn)
- 廣東省深圳市南山區(qū)2023-2024學(xué)年六年級(jí)上學(xué)期期末科學(xué)試卷
- 臨床研究數(shù)據(jù)清洗與質(zhì)量控制
- 骨科專業(yè)質(zhì)量控制標(biāo)準(zhǔn)
- 1種植業(yè)及養(yǎng)殖業(yè)賬務(wù)處理及科目設(shè)置
評(píng)論
0/150
提交評(píng)論