JS+CSS实现过渡特效
程序员文章站
2022-06-16 09:42:00
最近在玩一个叫baba is you的游戏，很羡慕里面的一个转场特效，所以试着做了一下。主要使用了js和css，特效主要是用css实现的。html代码<...
最近在玩一个叫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来改的。主要是用来做一个期末项目的，这个项目某些东西我以后也会慢慢总结的。
那么，就这样，可能我写的特效会跟别人的撞车，请多多包涵。如果感觉不是什么高大上的东西，也请多多包涵。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： Android实现无限循环滚动
下一篇： 卤肉饭是什么肉做的