最近在玩一个叫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来改的。主要是用来做一个期末项目的,这个项目某些东西我以后也会慢慢总结的。
那么,就这样,可能我写的特效会跟别人的撞车,请多多包涵。如果感觉不是什么高大上的东西,也请多多包涵。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 《年度十大发烧唱片精选 唱片榜获奖作品 2CD》[WAV/分轨][1GB]
- 归龙潮三枚天灯碎片位置在哪 笼律鸟任务天灯图文位置
- 归龙潮新手开荒阵容怎么搭配 新手前期阵容养成攻略
- 归龙潮中浦城区福鼠位置在哪 中浦城区福鼠收集位置大全
- MatteoPasqualini-JohannSebastianBachItalienischesKonzertFranzsischeOuvertureVierDue
- 【雨果唱片】陈百强《梦里人LPCD45》2012[WAV+CUE]
- 王菲.1994-《迷路》美卡引进版[WAV+CUE]
- 老外遇到八戒裸体Bug 网友:我需要用它对付蜘蛛精
- 《黑神话》超强越化补丁:游戏里有文字的地都改了
- 玩家吐槽《黑神话:悟空》唐僧相貌:一脸衰样 没半点气质
- 群星.1994-烧得厉害VOL.2我不是一个人拙滚石】【WAV+CUE】
- 群星.1994-烧得厉害VOL.3风笑痴【滚石】【WAV+CUE】
- 群星.1995-烧得厉害VOL.4两个世界【滚石】【WAV+CUE】
- 归龙潮中浦城区宝箱位置收集大全 中浦区宝箱解密攻略
- 黑神话悟空上品幽灯鬼精魄获取方法一览|上品幽灯鬼精魄收集攻略