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 相关文章推荐
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
验证javascript中Object和Function的关系的三段简单代码
Jun 27 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
详解VUE前端按钮权限控制
Apr 26 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
php _autoload自动加载类与机制分析
2012/02/10 PHP
服务器迁移php版本不同可能诱发的问题
2015/12/22 PHP
PHP内置加密函数详解
2016/11/20 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
js中this对象用法分析
2018/01/05 Javascript
浅谈React高阶组件
2018/03/28 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
Python 函数基础知识汇总
2018/03/09 Python
python3实现猜数字游戏
2020/12/07 Python
django序列化serializers过程解析
2019/12/14 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
keras 权重保存和权重载入方式
2020/05/21 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
就业推荐表自我鉴定
2013/10/29 职场文书
税务干部鉴定材料
2014/02/11 职场文书
2014年新生军训方案
2014/05/01 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP
一文弄懂MySQL索引创建原则
2022/02/28 MySQL
Redis实战高并发之扣减库存项目
2022/04/14 Redis
MongoDB数据库之添删改查
2022/04/26 MongoDB
如何利用python创作字符画
2022/06/25 Python