服务器之家

服务器之家 > 正文

JS+CSS实现过渡特效

时间：2021-12-23 16:00     来源/作者：Dr_空山

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

JS+CSS实现过渡特效

HTML代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!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代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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来改的。主要是用来做一个期末项目的，这个项目某些东西我以后也会慢慢总结的。
那么，就这样，可能我写的特效会跟别人的撞车，请多多包涵。如果感觉不是什么高大上的东西，也请多多包涵。

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

原文链接：https://blog.csdn.net/weixin_50759039/article/details/112056597

标签：
css JS 过渡 

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整
蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整 2021-08-24
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部