欢迎光临

<meta charset=utf-8 />
<style>
body{margin:0;overflow:hidden}
div,li{list-style:none;cursor:pointer;font-size:50;transition:2s;}
.wel{display:flex;align-items:center;justify-content:space-around;height:100%}
.col{display:flex;flex-direction:column;justify-content:space-around;height:100%}
</style>
<div class=wel>
	<li>临</li>
	<div class=col>
		<li>迎</li>
		<li>光</li>
	</div>
	<li>欢</li>
</div>
<div class=list>
</div>
<script src=jq.js></script>
<script>
onpopstate=function(){	
	$('.list').html(nav[location.href.split('#')[1]])
}	
setTimeout(function (){
	a=$(".wel").children('li').eq(1).offset().left-$(".wel").children('li').eq(0).offset().left
	b=-a
	$(".wel").children('li').eq(0).css({'transform':'translateX('+a+'px'})
	$(".wel").children('li').eq(1).css({'transform':'translateX('+b+'px'})
	c=$(".wel").children('li').eq(0).offset().top
	d=$(".col li:first-child").offset().top
	e=$(".col").children('li').eq(1).offset().top
	f=c-d
	g=c-e
	$(".col li:first-child").css({'transform':'translate(-150px,'+f+'px)'})
	$(".col").children('li').eq(1).css({'transform':'translate(150px,'+g+'px)'})
	str='欢迎光临'
	欢迎光临=str.split('').map(s=>'<li>'+s+'</li>')
	nav={欢迎光临}
	first=true
	height=-$(this).height()
	$('.list').html(欢迎光临).css({'display':'flex','align-items':'center','justify-content':'space-around','height':'100%','flex-direction':'column','transform':'translateY('+height+'px)'})
	history.pushState('','','#'+str)
	for (i = 4000;  i>=0; i-=1000) {
		(function(i){    
			setTimeout(function (){
				$('.wel').css('opacity',i/4000)
				$('.list').css('opacity',(4000-i)/4000)
			 },4000-i);  
		})(i);  
	}
},1000)
$('.list').on('mouseover','li',function(){
	if(first){
		history.pushState('','','#'+$(this).html())
		nav[$(this).html()]=$(this).html()
		$('.list').html('<li>'+$(this).html()+'</li>')
		first=false
	}
})	
$('.list').on('click','li',function(){
	wel=str.split('')
	for(i=0;i<wel.length;i++){
		if(wel[i]==$(this).html()){
			if(wel.length-i==1){
				history.pushState('','','#'+wel[0])
				$('.list').html('<li>'+wel[0]+'</li>')
			}else{
				history.pushState('','','#'+wel[i+1])
				$('.list').html('<li>'+wel[i+1]+'</li>')
			}
			nav[$(this).html()]=$(this).html()
		}	
	}		
})
</script>