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 相关文章推荐
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
javascript白色简洁计算器
May 04 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
使用jquery如何获取时间
Oct 13 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 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分页函数
2006/10/09 PHP
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
django如何实现视图重定向
2019/07/24 Python
查看keras的默认backend实现方式
2020/06/19 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
2014社区三八妇女节活动方案
2014/03/30 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
土建施工员岗位职责
2014/07/16 职场文书
就业推荐表导师评语
2014/12/31 职场文书
小学教师党员承诺书
2015/04/27 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
室外天线与收音机天线杆接合方法
2022/04/05 无线电