JS+CSS实现过渡特效
作者：Dr_空山 发布时间：2024-05-02 16:14:18
标签：js,css,过渡
最近在玩一个叫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来改的。主要是用来做一个期末项目的，这个项目某些东西我以后也会慢慢总结的。
那么，就这样，可能我写的特效会跟别人的撞车，请多多包涵。如果感觉不是什么高大上的东西，也请多多包涵。
来源：https://blog.csdn.net/weixin_50759039/article/details/112056597
0
投稿猜你喜欢
- 在MySQL的管理过程中，会遇到PC Server脱机或者重启，我需要在主机启动后再将MySQL服务启动。如果上百台或者更多的MySQL主机
Purge死锁场景说明Purge死锁说明表中存在记录（unique key） 10，20，30，40 （且有 自增主键 ），现在删除记录 2- 在Linux系统下获取USB PID&VID是件十分容易的事情，只需要"lsusb"命令就可以了。不过，对于Wi
- Javascript 中将多个语句写成一个语句的两种方法小结一、使用逗号运算符将多个语句写成一个语句 1.一次声明多个变量&nb
- 问题怎样捕获代码中的所有异常？解决方案想要捕获所有的异常，可以直接捕获 Exception 即可：try: ...except
- 1、首先看SSM(Spring+SpringBoot+Mybatis)的依赖<project xmlns="http://m
- ORM模型：ORM模型对于后端开发来说肯定是不陌生的，包括很多后端框架比如django，现在都自带这个模型了ORM（Object Relat
- 本文实例为大家分享了python分割一个文本为多个文本，供大家参考，具体内容如下# load file# for each row## if
- 1、打开插件市场链接：ext.dcloud.net.cn/plugin?id=2…点击红色框按钮绑定包名，这个包名与后
- 前言:看似简单的任务，往往隐藏陷阱！一个常见的任务是在一个列表上迭代，并根据条件删除一些元素。本文将展示如何完成该任务的不同方法，同时展示一
- public static char doVerify(String id) { char pszSrc[]=id.toCharArray(
- 一般情况下，用Mybatis的时候是先设计表结构再进行实体类以及映射文件编写的，特别是用代码生成器的时候。但有时候不想用代码生成器，也不想定
- 亮度调整非线性亮度调整：对于R,G,B三个通道，每个通道增加相同的增量。线性亮度调整：利用HSL颜色空间，通过只对其L（亮度）部分调整，可达
- 前两天写了一篇《浅谈网站用户粘性的含义》的文章，有些个别网友问可否谈谈怎么样加强用户粘性的问题？虽然对此本人没有系统的理论做以支撑，但是既然
- Python爬虫：一些常用的爬虫技巧总结爬虫在开发过程中也有很多复用的过程，这里总结一下，以后也能省些事情。1、基本抓取网页get方法imp
- 在Numpy中经常使用到的操作由扁平化操作,Numpy提供了两个函数进行此操作,他们的功能相同,但在内存上有很大的不同.先来看这两个函数的使
- 1.1 ID定位HTML Tag 的 id 属性值是唯一的，故不存在根据 id 定位多个元素的情况。下面以在百度首页搜索框输入文本
- python：simplified-chinese-menu:中文汉化（英文差的）代码高亮：Atom自带自动补全：autocomplete-
- 在编写python函数时，无意中发现一个问题：python中的变量不能以数字打头，以下函数中定义了一个变量3_num_varchar，执行时
- 我就废话不多说了，还是直接看代码吧！import matha=1;//边1b=1;//边2c=math.sqrt(2);//边3A=math
