欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS+CSS实现过渡特效

程序员文章站 2022-03-23 10:13:24
最近在玩一个叫baba is you的游戏,很羡慕里面的一个转场特效,所以试着做了一下。主要使用了js和css,特效主要是用css实现的。html代码<...

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

JS+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实现过渡特效

效果js的解析都写在注释里了,css就是使用@keyframes来实现效果,也不是什么难懂的。
这种效果对于用于展示开场应该足够了,主要可以用来炫耀之类的,js的代码或许比较粗糙,是从某个朋友的雪花特效那copy来改的。主要是用来做一个期末项目的,这个项目某些东西我以后也会慢慢总结的。
那么,就这样,可能我写的特效会跟别人的撞车,请多多包涵。如果感觉不是什么高大上的东西,也请多多包涵。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关标签: js css 过渡