JS+CSS实现过渡特效


Posted in Javascript onJanuary 02, 2021

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

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

Javascript 相关文章推荐
Web开发之JavaScript
Mar 29 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
Angular和百度地图的结合实例代码
Oct 19 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
小程序自定义弹框效果
Nov 16 Javascript
基于JavaScript实现省市联动效果
Jun 22 Javascript
jQuery实现全选按钮
Jan 01 #jQuery
vue实现登录功能
Dec 31 #Vue.js
vue 实现图片懒加载功能
Dec 31 #Vue.js
vue 动态创建组件的两种方法
Dec 31 #Vue.js
Vue 修改网站图标的方法
Dec 31 #Vue.js
利用 JavaScript 实现并发控制的示例代码
Dec 31 #Javascript
jquery自定义组件实例详解
Dec 31 #jQuery
You might like
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
PHP CodeBase:将时间显示为&quot;刚刚&quot;&quot;n分钟/小时前&quot;的方法详解
2013/06/06 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
js实现聊天对话框
2020/02/08 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
使用python实现baidu hi自动登录的代码
2013/02/10 Python
python实现爬虫下载美女图片
2015/07/14 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
python实现TCP文件传输
2020/03/20 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
荷兰超市:DEEN
2018/03/14 全球购物
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
岗位职责风险防控
2014/02/18 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
火锅店的活动方案
2014/08/15 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
务工证明怎么写
2015/06/18 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python