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>開(kāi)始導(dǎo)航</title> <link rel='stylesheet' href='http://www.gepszalag.com/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的解析都寫(xiě)在注釋里了，CSS就是使用@keyframes來(lái)實(shí)現(xiàn)效果，也不是什么難懂的。這種效果對(duì)于用于展示開(kāi)場(chǎng)應(yīng)該足夠了，主要可以用來(lái)炫耀之類的，JS的代碼或許比較粗糙，是從某個(gè)朋友的雪花特效那copy來(lái)改的。主要是用來(lái)做一個(gè)期末項(xiàng)目的，這個(gè)項(xiàng)目某些東西我以后也會(huì)慢慢總結(jié)的。那么，就這樣，可能我寫(xiě)的特效會(huì)跟別人的撞車，請(qǐng)多多包涵。如果感覺(jué)不是什么高大上的東西，也請(qǐng)多多包涵。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Django使用HTTP協(xié)議向服務(wù)器傳參方式小結(jié)2. 淺談PHP設(shè)計(jì)模式之門(mén)面模式Facade3. Intellij IDEA 旗艦版創(chuàng)建 Spring MVC 項(xiàng)目踩過(guò)的坑4. django實(shí)現(xiàn)模板中的字符串文字和自動(dòng)轉(zhuǎn)義5. Python+OpenCV圖像處理—— 色彩空間轉(zhuǎn)換6. IntelliJ IDEA卡死，如何優(yōu)化內(nèi)存7. IntelliJ IDEA下的SVN使用(傻瓜式教學(xué))8. Ajax 的初步實(shí)現(xiàn)(使用vscode+node.js+express框架)9. python中requests模擬登錄的三種方式(攜帶cookie/session進(jìn)行請(qǐng)求網(wǎng)站)10. Android Studio導(dǎo)入項(xiàng)目不支持的兩種解決方式
網(wǎng)公網(wǎng)安備