<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
*{
padding: 0;
margin: 0;
}
body{
overflow: hidden;
}
ul{
list-style: none;
}
@-webkit-keyframes show {
0%{
opacity: 1;
transform:translateX(100%);
}
100%{
opacity: 1;
transform:translateX(0%);
}
}
div{
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100vh;
padding-left: 10px;
position: absolute;
left: 0;
top:0;
opacity:0;
}
p{
font-size: 40px;
text-align: center;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 2px;
}
div:nth-of-type(1){
background-color: rgba(255,255,200,1);
z-index: 1;
}
div:nth-of-type(2){
background-color: rgba(255,0,255,1);
}
div:nth-of-type(3){
background-color: rgba(255,255,0,1);
}
div:nth-of-type(4){
background-color: rgba(0,255,255,1);;
}
div:nth-of-type(5){
background-color: rgba(255,200,255,1);
}
:target{
z-index: 2;
animation: show .3s ease-in .1s 1 forwards;
}
</style>
</head>
<body>
<div id="menu">
<p>menu</p>
<ul>
<li><a href="#test1">test1</a></li>
<li><a href="#test2">test2</a></li>
<li><a href="#test3">test3</a></li>
<li><a href="#test4">test4</a></li>
</ul>
</div>
<div id="test1">
<p>test1</p>
<ul>
<li><a href="#test2">next</a></li>
<li><a href="#menu">menu</a></li>
</ul>
</div>
<div id="test2">
<p>test2</p>
<ul>
<li><a href="#test1">pre</a></li>
<li><a href="#test3">next</a></li>
<li><a href="#menu">menu</a></li>
</ul>
</div>
<div id="test3">
<p>test3</p>
<ul>
<li><a href="#test2">pre</a></li>
<li><a href="#test4">next</a></li>
<li><a href="#menu">menu</a></li>
</ul>
</div>
<div id="test4">
<p>test4</p>
<ul>
<li><a href="#test3">pre</a></li>
<li><a href="#menu">menu</a></li>
</ul>
</div>
<script>
location.hash='menu';
</script>
</body>
</html>