解決移動端跳轉(zhuǎn)問題(CSS過渡、target偽類)

發(fā)布時間：2019-10-10 14:58:23 作者：Nice先生的狂想曲

這篇文章主要介紹了解決移動端跳轉(zhuǎn)問題(CSS過渡、target偽類)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

很多剛剛接觸移動端的小伙伴都可能對于點擊跳轉(zhuǎn)路由這方面有些疑惑，特別是運用了Vue路由，因此這篇文章就帶領(lǐng)小伙伴一起嘗試用css進(jìn)行頁面跳轉(zhuǎn)

效果如圖，由于是移動端，所以選擇預(yù)覽的手機(jī)模擬：

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>

主要分為main和nav兩部分，其中main中包含的三個div表示三個不同的頁面，同時對應(yīng)的nav中三個不同的a，特別需要注意a標(biāo)簽中的href對應(yīng)main中包含的三個div的id。

CSS

*{
padding: 0;
margin: 0;
}
body{
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
position: relative;
}
body::after{/*默認(rèn)的背景*/
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偽類即設(shè)置了a鏈接后點擊的div*/
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;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

Tag：target偽類 CSS過渡移動端跳轉(zhuǎn)

相關(guān)文章

詳解css3中的偽類before和after常見用法
這篇文章主要介紹了詳解css3中的偽類before和after常見用法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-11-17
CSS偽類:empty讓我眼前一亮(實例代碼)
這篇文章主要介紹了CSS偽類:empty讓我眼前一亮，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-11-03
淺談CSS 偽元素&偽類的妙用
這篇文章主要介紹了淺談CSS 偽元素&偽類的妙用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)
2020-09-01
CSS 偽類修改input選中樣式的示例代碼
這篇文章主要介紹了CSS 偽類修改input選中樣式的示例代碼,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-07-21
css偽類右下角點擊出現(xiàn) 對號角標(biāo)表示選中的示例代碼
這篇文章主要介紹了css偽類右下角點擊出現(xiàn) 對號角標(biāo)表示選中，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-06-22
css選擇器四大類：基本、組合、屬性、偽類
這篇文章主要介紹了css選擇器四大類：基本、組合、屬性、偽類的相關(guān)知識，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2020-02-14
詳解如何使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器
這篇文章主要介紹了詳解如何使用CSS3中的結(jié)構(gòu)偽類選擇器和偽元素選擇器，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面
2020-01-06
css3 偽類選擇器快速復(fù)習(xí)小結(jié)
如果說 css 作為前端開發(fā)的基本功, 那么 "選擇器" 就是基礎(chǔ)中的基礎(chǔ)，本文介紹了css3 偽類選擇器快速復(fù)習(xí)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工
2019-09-10
CSS新增的:where和:is偽類函數(shù)是什么
這篇文章主要介紹了CSS新增的:where和:is偽類函數(shù)是什么的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-04-15