移动端切屏动画-切换页面展开时上个页面渐变消失当前页面出现

向右看齐 2021-07-24 19:02 299阅读 0赞

做法:
    	a标签+target伪类,a标签的id绑定页面元素的id,初始元素在屏幕外,
    	使用target伪类当点击超链接时添加移动样式,并会显示对应target元素的内容

代码示例:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	<link rel="stylesheet" href="./index.css">
    	<style>
    		.box{ 
    /* width: 400px; height: 400px; border: solid 1px blueviolet; */
    			flex:1;
    			position:relative;
    		}
    		.box>div{ 
    			position: absolute;
    			left: 0;
    			top:0;
    			width:100%;
    			height:100%;
    			display: flex;
    			align-items: center;
    			justify-content: center;
    			font-size: 30px;
    			transform: translateY(-100%);
    			transition: 1s;
    			/* background-color: black; */
    		}
    			
    		.box>div:nth-child(1){ 
    		}
    		.box>div:nth-child(2){ 
    
    		}
    		.box>div:nth-child(3){ 
    
    		}
    		body{ 
    			width: 100vw;
    			height: 100vh;
    			display: flex;
    			flex-direction: column;
    		}
    		
    		.nav{ 
    			height: 8vh;
    			background-color: #8A2BE2;
    			display: flex;
    			justify-content: space-evenly;
    			z-index: 99;
    			
    			
    			
    		}
    		.nav a{ 
    			text-transform: uppercase;
    			text-decoration: none;
    		}
    		.nav a:nth-child(2)
    		{ 
    			border-right: solid 1px red;
    			border-left: solid 1px red;
    			padding: 0 200px;
    		}
    		.box>div:nth-child(1):target{ 
    			background-color: orange;
    			transform: translateY(0);
    		}
    		.box>div:nth-child(2):target{ 
    			background-color: green;
    			transform: translateY(0);
    		}
    		.box>div:nth-child(3):target{ 
    			background-color: darkred;
    			transform: translateY(0);
    		}
    			
    	</style>
    	</head>
    	<body class='me'>
    		<div class='box'>
    			<div id='d1' class='d1'>1</div>
    			<div id='d2' class='d2'>2</div>
    			<div id='d3' class='d3'>3</div>
    
    		</div>
    		<div class='nav'>
    			<a href="#d1">1</a>
    			<a href="#d2">2</a>
    			<a href="#d3">3</a>
    		</div>
    	</body>
    </html>

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/37955dccfd2e445fad56e7b391db5239.png