資訊專欄INFORMATION COLUMN
摘要：純媒體查詢實(shí)現(xiàn)網(wǎng)頁導(dǎo)航特效附上效果圖代碼如下，復(fù)制即可使用我在這誰敢動(dòng)我。
純css+媒體查詢實(shí)現(xiàn)網(wǎng)頁導(dǎo)航特效
附上效果圖：
代碼如下，復(fù)制即可使用：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body {
background: #801638;
}
body,
body > * {
margin: 0;
padding: 0;
font-family: Roboto, sans-serif;
font-weight: normal;
}
* {
transition: all .3s ease 0s;
}
/* Background colours */
div + div article:nth-child(1) {
background: #c22326;
}
div + div article:nth-child(2) {
background: #f37338;
}
div + div article:nth-child(3) {
background: #fdb632;
}
div + div article:nth-child(4) {
background: #027878;
}
div + div article:nth-child(5),
div + div {
background: #801638;
}
/* Main layout */
html,
body,
div + div {
width: 100vw;
height: 100vh;
}
div + div {
list-style: none;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
overflow: hidden;
}
/* Articles */
div + div article {
flex: initial;
width: 20%;
height: 100%;
text-align: center;
color: #fff;
text-decoration: none;
vertical-align: bottom;
box-sizing: border-box;
padding: 2vh 1vw;
position: relative;
}
/* Big Headings */
body > div:first-child {
position: fixed;
bottom: 8vh;
background: #fff;
width: 100%;
text-align: center;
padding: .5rem;
z-index: 2;
}
body > div:first-child h1,
body > div:first-child h2 {
margin: 0;
padding: 0;
}
/* Hover interaction */
div + div:hover article {
flex: initial;
width: 10%;
}
div + div article:hover {
width: 60%;
}
article > div {
opacity: 0;
transition: opacity .2s ease 0;
}
div + div article:hover > div {
opacity: 1;
transition: opacity .3s ease .3s;
}
/* navigation */
div + div article > h2 {
bottom: 2vh;
position: absolute;
text-align: center;
width: 100%;
margin: 0;
font-size: 3vh;
}
/* Article layouts */
article div {
text-align: left;
width: 58vw;
}
article div p,
article div div h2,
article div h3 {
margin: 0 0 1em 0;
}
article div p {
width: 40vw;
}
@media (max-width: 900px) {
div + div article {
padding: 2vh 3vw;
}
div + div article > h2 {
transform: rotate(90deg);
bottom: 23vh;
min-width: 12em;
text-align: left;
transform: rotate(-90deg);
transform-origin: 0 0 0;
opacity: 1;
}
div + div article:hover > h2 {
opacity: 0;
}
article div p {
width: 50vw;
}
article div {
max-height: calc(72%);
overflow-y: auto;
}
}
style>
head>
<body>
<div>
<h1>我在這,誰敢動(dòng)我。h1>
<h2>我是你們大哥的頭h2>
div>
<div>
<article>
<h2>大哥的小弟一h2>
<div>
<h3>大哥的小弟一h3>
<p>身高180p>
<p>體重120p>
div>
article>
<article>
<h2>大哥的小弟二h2>
<div>
<h3>大哥的小弟二h3>
<p>身高160p>
<p>體重100p>
div>
article>
<article>
<h2>大哥的小弟三h2>
<div>
<h3>大哥的小弟三h3>
<p>身高175p>
<p>體重180p>
div>
article>
<article>
<h2>大哥的小弟四h2>
<div>
<h3>大哥的小弟四h3>
<p>身高180p>
<p>體重110p>
div>
article>
<article>
<h2>大哥的小弟五h2>
<div>
<h3>大哥的小弟五h3>
<p>身高180p>
<p>體重150p>
div>
article>
div>
body>
html>
如有錯(cuò)誤，歡迎聯(lián)系我指正，非常感謝！?。?/p>
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2306.html
摘要：規(guī)范名稱定義，便于維護(hù)。譬如關(guān)于的定義在格式化的中會(huì)聲明為，而在基本樣式的中又可能會(huì)聲明所以在中會(huì)出現(xiàn)多次定義。盡量減少連接數(shù)和的大小?；诎姹镜氖褂媚壳笆褂幂^廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁面不僅需要更人性化的設(shè)計(jì)理念，而且需要更酷的頁面特效和用戶體驗(yàn)。作為開發(fā)者，我們需要了解一些寶貴的CSS UI開源框架資源，它們可以幫助我...
摘要：規(guī)范名稱定義，便于維護(hù)。譬如關(guān)于的定義在格式化的中會(huì)聲明為，而在基本樣式的中又可能會(huì)聲明所以在中會(huì)出現(xiàn)多次定義。盡量減少連接數(shù)和的大小?；诎姹镜氖褂媚壳笆褂幂^廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁面不僅需要更人性化的設(shè)計(jì)理念，而且需要更酷的頁面特效和用戶體驗(yàn)。作為開發(fā)者，我們需要了解一些寶貴的CSS UI開源框架資源，它們可以幫助我...
摘要：規(guī)范名稱定義，便于維護(hù)。譬如關(guān)于的定義在格式化的中會(huì)聲明為，而在基本樣式的中又可能會(huì)聲明所以在中會(huì)出現(xiàn)多次定義。盡量減少連接數(shù)和的大小?；诎姹镜氖褂媚壳笆褂幂^廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁面不僅需要更人性化的設(shè)計(jì)理念，而且需要更酷的頁面特效和用戶體驗(yàn)。作為開發(fā)者，我們需要了解一些寶貴的CSS UI開源框架資源，它們可以幫助我...
摘要：過往項(xiàng)目年月份項(xiàng)目匯總共個(gè)項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書頻演示如何用純創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效視頻演示如何用純創(chuàng)作一個(gè)同心圓弧旋轉(zhuǎn)特效視頻演 過往項(xiàng)目 2018 年 4 月份項(xiàng)目匯總（共 8 個(gè)項(xiàng)目） 2018 年 5 月份發(fā)布的項(xiàng)目 《前端每日實(shí)戰(zhàn)》專欄每天分解一個(gè)前端項(xiàng)目，用視頻記錄...
閱讀 740·2023-04-25 19:43
閱讀 3986·2021-11-30 14:52
閱讀 3816·2021-11-30 14:52
閱讀 3873·2021-11-29 11:00
閱讀 3809·2021-11-29 11:00
閱讀 3907·2021-11-29 11:00
閱讀 3584·2021-11-29 11:00
閱讀 6197·2021-11-29 11:00
