JS+CSS實(shí)現(xiàn)過(guò)渡特效
最近在玩一個(gè)叫Baba is you的游戲，很羨慕里面的一個(gè)轉(zhuǎn)場(chǎng)特效，所以試著做了一下。主要使用了JS和CSS，特效主要是用CSS實(shí)現(xiàn)的。
HTML代碼
<!DOCTYPE html><html lang='en' dir='ltr'> <head> <meta charset='utf-8'> <title>開始導(dǎo)航</title> <link rel='stylesheet' href='http://www.aoyou183.cn/bcjs/style.css' > </head> <body> <div class='text'> <p><a id='bottom'>點(diǎn)擊進(jìn)入</a></p> </div> </body> <script type='text/javascript'>//執(zhí)行代碼window.onload=function(){ var bottom=document.getElementById('bottom'); bottom.onclick=function(){ action(); }}//獲取網(wǎng)頁(yè)長(zhǎng)寬var windowWidth=window.screen.width;var windowHeight=window.screen.height;function createSnow(){ topblack(); leftblack(); bottomblack(); rightblack(); function topblack(){ //隨機(jī)創(chuàng)造1個(gè)div圓球 var left_random=Math.random()*windowWidth; var top_random=Math.random()*50; var div=document.createElement(’div’); div.className=’snow’; //定義縮放轉(zhuǎn)換 div.style.transform=’scale(’+(Math.random()*3)+’)’ //定義隨機(jī)位置，在頂部50像素之內(nèi) div.style.left=left_random+’px’; div.style.top=top_random+’px’; //放在html外面，先用overflow:hidden隱藏掉 div.style.marginTop='-250px'; document.body.appendChild(div); } function leftblack(){ var left_random=Math.random()*50; var top_random=Math.random()* windowHeight; var div=document.createElement(’div’); div.className=’snow’; div.style.transform=’scale(’+(Math.random()*2)+’)’ div.style.left= left_random+’px’; div.style.top=top_random+’px’; div.style.marginLeft='-250px'; document.body.appendChild(div); } function bottomblack(){ var left_random=Math.random()*windowWidth; var bottom_random=Math.random()*50; var div=document.createElement(’div’); div.className=’snow’; div.style.transform=’scale(’+(Math.random()*2)+’)’ div.style.left=left_random+’px’; div.style.bottom=bottom_random+’px’; div.style.marginBottom='-250px'; document.body.appendChild(div); } function rightblack(){ var right_random=Math.random()*50; var top_random=Math.random()* windowHeight; var div=document.createElement(’div’); div.className=’snow’; div.style.transform=’scale(’+(Math.random()*2)+’)’ div.style.right=right_random+’px’; div.style.top=top_random+’px’; div.style.marginRight='-250px'; document.body.appendChild(div); } }function setblack(){ //各自創(chuàng)造100個(gè)圓球隨機(jī)放在HTML頂部、底部、左右邊，各自隱藏。 for(var i=0;i<100;i++){ createSnow() } }//清除使用過(guò)后的云層與文字function clearsnow(){ var snow=document.querySelectorAll('.snow'); var font=document.querySelector('.Fontarea'); for(var i=0;i<snow.length;i++){ document.body.removeChild(snow[i]); } document.body.removeChild(font);}//只是一個(gè)習(xí)慣，定義一個(gè)創(chuàng)建div的模板函數(shù)。你們可以用自己的方式。function font(oCss){ var oBox=document.createElement('p'); oCss.parent.appendChild(oBox); oBox.innerHTML=oCss.p; oBox.className=oCss.c; return oBox;}function create(oCss){ var oBox=document.createElement('div'); oCss.parent.appendChild(oBox); oBox.style.width=oCss.w+'px'; oBox.style.height=oCss.h+'px'; oBox.style.position=oCss.p; oBox.style.left=oCss.l+'px'; oBox.style.top=oCss.t+'px'; oBox.style.backgroundSize='100%'; return oBox;}//創(chuàng)建浮現(xiàn)的文字function winthegame(){var Fontarea=create({ 'w':500, 'h':600, 'p':'absolute', 'parent':document.body, 'l':'400', 't':'0'});Fontarea.style.marginTop='200px';Fontarea.className='Fontarea';Fontarea.style.zIndex='31';var titlep=font({ 'parent':Fontarea,'p':'CONGRATULATION!','c':'font7'});}//執(zhí)行創(chuàng)建云層與文字，封裝起來(lái)是因?yàn)椋绻淖殖霈F(xiàn)多個(gè)不同的，就用不同的函數(shù)封裝不同的場(chǎng)合。function wintime(){ winthegame(); setblack();}//執(zhí)行創(chuàng)建與清除，用setTimeout()來(lái)延遲清除。function action(){ wintime();setTimeout(clearsnow,5000);} </script></html>
css代碼
body{ background-size: 100%; overflow: hidden; background-color: #000;}.text{ color: white; text-align: center; text-transform: uppercase; margin: 300px 0; font-size: 22px;}.text a{color:white; text-decoration:none; cursor: pointer; }.snow{ background: #15181f; position: absolute; width: 100px; height: 100px; border-radius: 50%; z-index: 30; animation: bganimation 5s 1;}.font7{ color:white; text-align: center; font-size: 60px;}.Fontarea{ opacity:0; animation: beganfont 4s 1;}@keyframes bganimation { 0%{ width: 100px; height: 100px; } 50%{ width: 500px; height: 500px; } 100%{ width: 100px; height: 100px; }}@keyframes beganfont { 0%{ opacity:0; } 50%{ opacity:1; } 100%{ opacity:0; }}
這是效果圖，點(diǎn)擊文字會(huì)執(zhí)行效果一次。
效果JS的解析都寫在注釋里了，CSS就是使用@keyframes來(lái)實(shí)現(xiàn)效果，也不是什么難懂的。這種效果對(duì)于用于展示開場(chǎng)應(yīng)該足夠了，主要可以用來(lái)炫耀之類的，JS的代碼或許比較粗糙，是從某個(gè)朋友的雪花特效那copy來(lái)改的。主要是用來(lái)做一個(gè)期末項(xiàng)目的，這個(gè)項(xiàng)目某些東西我以后也會(huì)慢慢總結(jié)的。那么，就這樣，可能我寫的特效會(huì)跟別人的撞車，請(qǐng)多多包涵。如果感覺(jué)不是什么高大上的東西，也請(qǐng)多多包涵。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. asp讀取xml文件和記數(shù)2. XML入門的常見問(wèn)題(一)3. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案4. 阿里前端開發(fā)中的規(guī)范要求5. html小技巧之td,div標(biāo)簽里內(nèi)容不換行6. webpack高級(jí)配置與優(yōu)化詳解7. IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值的完美解決方案8. Xml簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理9. 讀寫xml文件的2個(gè)小函數(shù)10. 告別AJAX實(shí)現(xiàn)無(wú)刷新提交表單
網(wǎng)公網(wǎng)安備