Solve the mobile terminal jump problem (CSS transition, target pseudo-class)

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

CentOS installation mysql5.7 detailed tutorial

This article shares the detailed steps of install...

Vite introduces the implementation of virtual files

Table of contents background Importing virtual fi...

How to use boost.python to call c++ dynamic library in linux

Preface Recently I started using robot framework ...

A brief discussion on the whole process of Vue's first rendering

Table of contents 1. Vue initialization vue entry...

MySQL table field time setting default value

Application Scenario In the data table, the appli...

Core skills that web front-end development engineers need to master

The content involved in Web front-end development...

js handles account logout when closing the browser

Table of contents Classic approach question Furth...

Use CSS to create 3D photo wall effect

Use CSS to create a 3D photo wall. The specific c...

Implementation of Nginx operation response header information

Prerequisite: You need to compile the ngx_http_he...

Dissecting the advantages of class over id when annotating HTML elements

There are very complex HTML structures in web pag...

Detailed explanation of Vue plugin

Summarize This article ends here. I hope it can b...

Detailed explanation of how to easily switch CSS themes

I recently added a very simple color scheme (them...

js uses cookies to remember user page operations

Preface During the development process, we someti...

How to configure pseudo-static and client-adaptive Nginx

The backend uses the thinkphp3.2.3 framework. If ...