JavaScript
搜索
分类

JS+CSS实现过渡特效

作者：Dr_空山 时间：2024-05-02 16:14:18　

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

来源：https://blog.csdn.net/weixin_50759039/article/details/112056597

标签：js,css,过渡
0
投稿

猜你喜欢

  • 操作Windows注册表的简单的Python程序制作教程

    2023-01-04 00:17:40

  • Python 3中print函数的使用方法总结

    2021-12-21 00:37:18

  • Python函数嵌套实例

    2022-11-11 06:43:34

  • 利用 Python 把小伙伴制作成表情包

    2022-08-14 16:57:46

  • CentOS8部署LNMP环境之编译安装mysql8.0.29的教程详解

    2024-01-18 04:54:14

  • 教你使用Python根据模板批量生成docx文档

    2021-12-27 00:35:13

  • python类的方法属性与方法属性的动态绑定代码详解

    2023-07-02 03:31:26

  • idea+git合并分支解决冲突及详解步骤

    2022-10-07 00:18:27

  • 用asp程序读取网站的alexa世界排名

    2008-11-23 20:43:00

  • django中ImageField的使用详解

    2023-09-28 03:58:37

  • Python用threading实现多线程详解

    2021-06-19 13:35:48

  • 浅析python参数的知识点

    2022-12-16 01:39:32

  • 详解Bagging算法的原理及Python实现

    2021-06-10 00:20:41

  • Go操作redis与redigo的示例解析

    2024-04-28 09:12:38

  • python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性

    2022-08-13 22:06:58

  • Python利用zhdate模块实现农历日期处理

    2023-03-07 22:10:20

  • PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结

    2024-05-03 15:53:21

  • asp之自动闭合HTML/ubb标签函数+简单注释

    2008-09-29 12:21:00

  • Python爬虫之批量下载喜马拉雅音频

    2022-09-25 20:18:27

  • 实例代码讲解Python 线程池

    2023-07-19 03:53:04
    • asp之家 网络编程 m.aspxhome.com