JS+CSS实现过渡特效
程序员文章站
2022-03-23 10:13:24
最近在玩一个叫baba is you的游戏,很羡慕里面的一个转场特效,所以试着做了一下。主要使用了js和css,特效主要是用css实现的。html代码<...
最近在玩一个叫baba is you的游戏,很羡慕里面的一个转场特效,所以试着做了一下。主要使用了js和css,特效主要是用css实现的。
html代码
<!doctype html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>开始导航</title> <link rel="stylesheet" href="style.css" > </head> <body> <div class="text"> <p><a id="bottom">点击进入</a></p> </div> </body> <script type="text/javascript"> //执行代码 window.onload=function(){ var bottom=document.getelementbyid("bottom"); bottom.onclick=function(){ action(); } } //获取网页长宽 var windowwidth=window.screen.width; var windowheight=window.screen.height; function createsnow(){ topblack(); leftblack(); bottomblack(); rightblack(); function topblack(){ //随机创造1个div圆球 var left_random=math.random()*windowwidth; var top_random=math.random()*50; var div=document.createelement('div'); div.classname='snow'; //定义缩放转换 div.style.transform='scale('+(math.random()*3)+')' //定义随机位置,在顶部50像素之内 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(){ //各自创造100个圆球随机放在html顶部、底部、左右边,各自隐藏。 for(var i=0;i<100;i++){ createsnow() } } //清除使用过后的云层与文字 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); } //只是一个习惯,定义一个创建div的模板函数。你们可以用自己的方式。 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; } //创建浮现的文字 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"}); } //执行创建云层与文字,封装起来是因为,如果文字出现多个不同的,就用不同的函数封装不同的场合。 function wintime(){ winthegame(); setblack(); } //执行创建与清除,用settimeout()来延迟清除。 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; } }
这是效果图,点击文字会执行效果一次。
效果js的解析都写在注释里了,css就是使用@keyframes来实现效果,也不是什么难懂的。
这种效果对于用于展示开场应该足够了,主要可以用来炫耀之类的,js的代码或许比较粗糙,是从某个朋友的雪花特效那copy来改的。主要是用来做一个期末项目的,这个项目某些东西我以后也会慢慢总结的。
那么,就这样,可能我写的特效会跟别人的撞车,请多多包涵。如果感觉不是什么高大上的东西,也请多多包涵。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 基于JavaScript实现简单扫雷游戏