JS+CSS实现过渡特效_JavaScript_移动技术网手机版

最近在玩一个叫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来改的。主要是用来做一个期末项目的，这个项目某些东西我以后也会慢慢总结的。
那么，就这样，可能我写的特效会跟别人的撞车，请多多包涵。如果感觉不是什么高大上的东西，也请多多包涵。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。