JS+CSS实现过渡特效

网络编程 2024/12/22 佚名

3 1 2

快活林资源网 Design By www.csstdc.com

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,css,过渡

快活林资源网 Design By www.csstdc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

快活林资源网 Design By www.csstdc.com

评论“JS+CSS实现过渡特效”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月22日

JS+CSS实现过渡特效

基于JavaScript实现简单扫雷游戏

jQuery实现全选按钮

评论“JS+CSS实现过渡特效”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接