最近在玩一个叫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来改的。主要是用来做一个期末项目的,这个项目某些东西我以后也会慢慢总结的。
那么,就这样,可能我写的特效会跟别人的撞车,请多多包涵。如果感觉不是什么高大上的东西,也请多多包涵。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,css,过渡
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“JS+CSS实现过渡特效”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年12月26日
2024年12月26日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]