请选择 进入手机版 | 继续访问电脑版

JS+CSS实现的过渡特效

[复制链接]
盛夏丨光年丶 发表于 2021-1-2 19:43:04 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
JS+CSS实现的过渡特效

最近在玩一个叫Baba is you的游戏,很羡慕内里的一个转场特效,所以试着做了一下。主要使用了JS和CSS,特效主要是用CSS实现的。

HTML代码

[code]          开始导航                  点击进入
   
    <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(&#39;div&#39;);            div.className=&#39;snow&#39;;            //界说缩放转换            div.style.transform=&#39;scale(&#39;+(Math.random()*3)+&#39;)&#39;            //界说随机位置,在顶部50像素之内            div.style.left=left_random+&#39;px&#39;;            div.style.top=top_random+&#39;px&#39;;            //放在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(&#39;div&#39;);            div.className=&#39;snow&#39;;            div.style.transform=&#39;scale(&#39;+(Math.random()*2)+&#39;)&#39;            div.style.left= left_random+&#39;px&#39;;            div.style.top=top_random+&#39;px&#39;;            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(&#39;div&#39;);            div.className=&#39;snow&#39;;            div.style.transform=&#39;scale(&#39;+(Math.random()*2)+&#39;)&#39;            div.style.left=left_random+&#39;px&#39;;            div.style.bottom=bottom_random+&#39;px&#39;;            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(&#39;div&#39;);            div.className=&#39;snow&#39;;            div.style.transform=&#39;scale(&#39;+(Math.random()*2)+&#39;)&#39;            div.style.right=right_random+&#39;px&#39;;            div.style.top=top_random+&#39;px&#39;;            div.style.marginRight="-250px";            document.body.appendChild(div);         }        }function setblack(){    //各自创造100个圆球随机放在HTML顶部、底部、左右边,各自隐藏。        for(var i=0;i
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )