Solve the mobile terminal jump problem (CSS transition, target pseudo-class)
|
Preface Many friends who have just come into contact with mobile terminals may have some doubts about click jump routing, especially when using Vue routing, so this article will lead friends to try to use CSS to jump to the page The effect is as shown in the figure. Since it is a mobile terminal, the mobile phone simulation is selected for preview:
HTML
<body>
<main>
<div id="shouye">shouye</div>
<div id="zhanlan">zhanlan</div>
<div id="geren">geren</div>
</main>
<nav>
<a href="#shouye" class="alink">shouye</a>
<a href="#zhanlan" class="alink">zhanlan</a>
<a href="#geren" class="alink">geren</a>
</nav>
</body>
It is mainly divided into two parts: main and nav. The three divs contained in main represent three different pages, and correspond to three different a's in nav. It should be noted that the href in the a tag corresponds to the id of the three divs contained in main. CSS
*{
padding: 0;
margin: 0;
}
body{
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
position: relative;
}
body::after{/*Default background*/
content: "this is my text";
font-size:4em;
position: absolute;
left: 50%;
top: 50%;
opacity: .8;
transform: translate(-50%,-50%);
}
main{
width: 100%;
flex: 1;
position: relative;
}
nav{
background-color: #2C3E50;
height: 8vh;
display: flex;
justify-content: space-between;
align-items: center;
}
nav .alink{
flex: 1;
color: #C3BED4;
text-align: center;
font-size: 2.5em;
text-decoration: none;
text-transform:uppercase;
opacity: .8;
}
nav .alink:nth-child(2){
border-left: solid 1px #E9E9E9;
border-right: solid 1px #E9E9E9;
}
main>div{
position: absolute;
width: 100%;
height: 100%;
font-size: 5em;
transform: translateY(-100%);
transition-duration: 1s;
}
main>div:target{/*: target pseudo class is the div that is clicked after setting the a link*/
transform: translateY(0);
z-index: 2;
}
main>div:nth-child(1):target{
background-color: #008000;
}
main>div:nth-child(2):target{
background-color: #495A80;
}
main>div:nth-child(3):target{
background-color: #FFFF00;
}
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: After docker run, the status is always Exited
>>: Detailed explanation of two points to note in vue3: setup
Recommend
Docker compose custom network to achieve fixed container IP address
Due to the default bridge network, the IP address...
Detailed explanation of the use of MySQL comparison operator regular expression matching REGEXP
1. Initialize data DROP TABLE IF EXISTS `test_01`...
Solution to slow response of Tomcat server
1. Analytical thinking 1. Eliminate the machine&#...
Solve the problem of spring boot + jar packaging deployment tomcat 404 error
1. Spring boot does not support jsp jar package, ...
The whole process of installing and configuring Harbor1.7 on CentOS7.5
1. Download the required packages wget -P /usr/lo...
HTML meta usage examples
Example Usage Copy code The code is as follows: &l...
How to create a basic image of the Python runtime environment using Docker
1. Preparation 1.1 Download the Python installati...
Native js to achieve puzzle effect
This article shares the specific code of native j...
In-depth understanding of mathematical expressions in CSS calc()
The mathematical expression calc() is a function ...
CSS3 mobile vw+rem method to achieve responsive layout without relying on JS
1. Introduction (1) Introduction to vw/vh Before ...
Use Javascript to develop sliding-nav navigation plug-in with sliding bar effect
Table of contents 1. Introduction 2. Usage 3. Dev...
Analysis of the cause of docker error Exited (1) 4 minutes ago
Docker error 1. Check the cause docker logs nexus...
Vue project implements left swipe delete function (complete code)
Achieve results The code is as follows html <t...
A brief discussion on the differences between the three major databases: Mysql, SqlServer, and Oracle
MySQL advantage: Small size, fast speed, low tota...
Detailed explanation of the front-end method of passing parameters between HTML pages
A situation that often occurs in a project is tha...