基于JavaScript实现游戏购物车效果详解

目录

• 项目展示
• 登陆界面
• 注册界面
• 主界面

项目展示

登陆界面

登陆界面html和js

    
    
    
    


	

	    

	       时间不是你的敌人，永恒才是。——《异界镇魂曲》
		
	
    

        IMPOSSIBLE
    
	

		

		    欢迎登陆
		
		

		

			
			
		
		

		
		
		
登录  注册
	
	
	
	
	

登陆界面css

@import url('http://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins' sans-serif;
}
 
body{
	background-image: url(img/logonbg.jpg);
	background-position:center ;
	background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #000;
}
 
/* 不可能变可能样式 */
.h2{
	position: absolute;
	top: 10%;
	left: 20%;
    color: #222;
    font-size: 4em;
    font-weight: 500;
    letter-spacing: 5px;
    cursor: pointer;
}
 
.h2 span{
    transition: .5s;
}
 
.h2:hover span:nth-child(1){
    margin-right: 10px;
}
 
#h2:hover span:nth-child(1)::after{
    content: "'";
}
 
 
.h2:hover span:nth-child(2){
    margin-left: 40px;
}
 
.h2:hover span{
    color: #fff;
    text-shadow: 0 0 10px #00f,
                 0 0 20px #00f,
                 0 0 30px #00f,
                 0 0 80px #00f,
                 0 0 120px #00f;
}
div{
	text-align: center;
	position: absolute;
	right: 10%;
	width:400px;
	height: 300px;
	background-color: rgba(255,255,255,0.5);
	border-radius: 20px;
}
input{
	margin: 10px 20px;
	border: 1px solid #FFEFD5;
	border-radius:20px;
	line-height: 30px;
	height: 30px;
	width: 170px;
	transition: 0.5s;
}
input:focus{
	box-shadow: 8px 8px 15px papayawhip;
	border: 1px solid white;
	border-radius:20px;
	width: 210px;
}
button{
	width: 130px;
	height: 40px;
	border: white;		
	border-radius: 20px;
	font-size: 16px;			
}
#tt{
	position: absolute;
	top: 10px;
	margin: 0 auto;
}
form{
	margin: 90px;
}
.xx{
	text-align: center;
	color:rgba(87,250,255,0.8);
	font-size: 10px;
	font-weight: bold;
}
body{
    margin: 0;
    padding: 0;
}
 
/* smoke-text样式 */
section{
    position: absolute;
	left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1200px;
    height: 100vh;
    overflow: hidden;
}
 
section .text{
    position: relative;
    color: #fff;
	font-size: 30px;
    margin: 20px;
    max-width: 800px;
    user-select: none;
}
 
section .text span{
    position: relative;
    display: inline-block;
    cursor: pointer;
}
 
section .text span.active{
    animation: smoke 2s linear forwards;
    transform-origin: bottom;
}
 
.show{
    animation: show-letter .5s linear forwards;
}
 
@keyframes show-letter{
    0%{
        opacity: 0;
        transform: rotate(0deg) scale(1);
    }
    50%{
        opacity: 0.5;
        transform: rotate(45deg) scale(1.1);
    }
 
    100%{
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}
 
@keyframes smoke{
    0%{
        opacity: 1;
        filter: blur(0);
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    }
    100%{
        opacity: 0;
        filter: blur(20px);
        transform: translateX(300px) translateY(-300px) rotate(720deg) scale(4);
    }
}
 

注册界面

注册界面html、css和js

 


	
		
	
	
	
		

			

			

				
				
			
			

				
				
			
			

				
				
			
			

				注册  登录
		
		
	

主界面

主界面html、css和js

	
		
		
		
	
	
		

		    

		        
主页
		        
推荐
		        
史低
		        
分类
		        
搜索
		        
我的
		        
好友
		        
设置
		    
		
		
		

			
			

				
艾尔登法环
				

					

						

							
							
							
							
						
						

						

							故事背景
							故事发生在名为“交界地”的地方，这里的人们拥戴永恒女王玛丽卡。也受到玛丽卡所祝福。所有接受祝福的人瞳孔中都有黄金一般的光芒，但也有些人因为各种原因失去了祝福，眼中的光芒消逝。这些人就被称为褪色者，并因此被逐出交界地。某天因为作为祝福核心的法环被击碎，祝福受到污染的半神们为了收集法环碎片发动了一场又一场的战争，导致世界变的满目疮痍，褪色者们因为法环破碎恢复了祝福，收集艾尔登法环碎片，挑战半神，而玩家们扮演的角色便是褪色者。
					
					

						

						
价格:$399
							添加购物车
						
					
				
			
			
			

				
战神4
				

					

						

							
							
							
							
						
						

						

							故事背景
							很久以前，因为希腊神话中的战神阿瑞斯的策略，克雷多斯失去了最爱的家人。愤怒的克雷多斯开始向希腊的众神挑战，并且成功复仇。之后克雷多斯抛下了凄惨的过去，来到了北欧并且获得了新的家庭。因为有着染血的过去，所以克雷多斯一直和自己的儿子保持着一段距离。但是，因为妻子的突然死亡，克雷多斯再次复出，为了完成妻子的遗言，他踏上了前往由北欧神话的诸神掌管的米兹伽尔兹之地的旅途。
					
					

						

						
价格:$345
							添加购物车
						
					
				
			
			
			

				
塞尔达传说.旷野之息
				

					

						

							
							
							
							
						
						

						

							故事背景
							该作故事发生在海拉鲁王国灭亡的一百年后，玩家扮演的林克在地下遗迹苏醒，但却失去了一切记忆，耳边时而响起既熟悉又陌生的声音，指引着林克开始了新的冒险之旅。林克只得在冒险中重拾记忆并最终去完成属于自己一百年前的使命。
					
					

						

						
价格:$275
							添加购物车
						
					
				
			
			
			

				
空洞骑士
				

					

						

							
							
							
							
						
						

						

							故事背景
							在一个错综复杂的地下城“空洞巢穴”，我们的英雄在这个地下王国内开始了他的历险，他需要利用自己的能力探索遗迹、消灭怪物或者和一些怪物做朋友来帮助自己。游戏强调操作技巧和探索发现，拥有一定的难度。
					
					

						

						
价格:$79
							添加购物车
						
					
				
			
			
			

				
幽灵线.东京
				

					

						

							
							
							
							
						
						

						

							故事背景
							在一位险恶神秘学者的操纵下，致命的超自然之力入侵东京，令东京的人口瞬间消失。与强大灵体结成同盟，在他们的 复仇之路 上助一臂之力，掌握各类强力技能，解开消失事件背后的黑暗真相。探索为超自然之力所扭曲的不一样的东京。从超摩登城市景观，到黑暗的幽深巷道和古老雅致的寺院，穿行于别样的美感之间，发现城市中横行的妖怪——徘徊在街巷间的复仇之灵。可升级的元素能力，和鬼灵追猎技能融会贯通，与超自然威胁对峙。凭借空灵之力，飞越东京天际线，翱翔街巷之间，发现新的任务，甚至可以先发制敌。
					
					

						

						
价格:$499
							添加购物车
						
					
				
			
			
			

				
哈利波特.霍格沃兹遗产
				

					

						

							
							
							
							
						
						

						

							故事背景
							游戏故事时间设定在了19世纪，玩家将扮演一名霍格沃兹魔法学校的学生，更重要的是玩家身上掌管着一枚揭开上古秘密的钥匙，而这个秘密足以威胁到整个巫师世界的安危。游戏开发组成员Avalanche Software表示本次作品的时间线在纽特·斯卡曼德、伏地魔等人出现之前。
					
					

						

						
价格:$299
							添加购物车
						
					
				
			
			
			

				
师傅
				

					

						

							
							
							
							
						
						

						

							故事背景
							玩家将在现代都市环境中进行的肉搏战，跟随一名年轻的功夫学生走上复仇之路，寻找杀害他家人的凶手。一对一，他没有盟友，却有无数的敌人。他将不得不依靠他对功夫的独特掌握来保卫他家族的遗产。为了克服看似无法克服的困难，玩家必须精通功夫，并且依靠一枚神奇的秘术吊坠，可以起死回生。不过秘术的代价很高，每复活一次，玩家的年龄就会急速增加。
					
					

						

						
价格:$129
							添加购物车
						
					
				
			
			
		
		

			

				关闭购物车
			
			

				
				

					

						

						
商品名称
						
商品单价
						
删除商品
					
				
			
			

				结算购物车
			
		
 
		
	

以上就是基于JavaScript实现游戏购物车效果详解的详细内容，更多关于JavaScript游戏购物车的资料请关注脚本之家其它相关文章！