資訊專欄INFORMATION COLUMN
摘要：恢復(fù)內(nèi)容開(kāi)始一效果二知識(shí)點(diǎn)清除默認(rèn)高度字體加粗延遲動(dòng)畫(huà)過(guò)渡按下標(biāo)選取集合元素的子元素一般用于沒(méi)有實(shí)際意義的文本，修飾文本，比如標(biāo)號(hào)元素獲取標(biāo)簽獲取對(duì)數(shù)組每個(gè)元素都執(zhí)行一次提供的函數(shù)三源碼關(guān)鍵詞描述波浪導(dǎo)航條
---恢復(fù)內(nèi)容開(kāi)始---
一、效果
二、知識(shí)點(diǎn)
1、line-height:1;/*清除默認(rèn)高度*/
2、font-weight: bold;/*字體加粗*/
3、transition-delay: 0.1s;延遲動(dòng)畫(huà)過(guò)渡
4、:nth-child(1)按下標(biāo)選取集合元素的子元素
5、一般用于沒(méi)有實(shí)際意義的文本，修飾文本，比如標(biāo)號(hào)
6、var oLi1=document.querySelectorAll(".wrap li");/*元素獲取*/
var oLi=document.getElementsByTagName("li");/*標(biāo)簽獲取*/
7、forEach()對(duì)數(shù)組每個(gè)元素都執(zhí)行一次提供的函數(shù)
三、源碼
doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="關(guān)鍵詞">
<meta name="Description" content="描述">
<title>波浪導(dǎo)航條title>
<style>
body{
margin: 0;
padding: 0;
height: 2000px;
line-height:1;/*清除默認(rèn)高度*/
}
.wrap{
position: fixed;
top: 50px;
right: 0;
width: 100px;
height: 400px;
}
.wrap ol{
list-style: none;
margin: 0;
padding: 0;
color: #fff;
}
.wrap:hover li{
left: 0;
}
.wrap li{
position: relative;
left:70px;
width: 100%;
height: 30px;
border-bottom: 1px solid #fff;
line-height: 30px;
color: black;
transition: 1s;
}
/*注釋原因用js來(lái)寫(xiě)特效，簡(jiǎn)單有維護(hù)性*/
/* .wrap li:nth-child(1){:nth-child(1)按下標(biāo)選取集合元素的子元素
transition-delay: 0;延遲動(dòng)畫(huà)過(guò)渡
}
.wrap li:nth-child(2){:nth-child(1)按下標(biāo)選取集合元素的子元素
transition-delay: 0.2s;延遲動(dòng)畫(huà)過(guò)渡
}
.wrap li:nth-child(3){
transition-delay: 0.3s;
}
.wrap li:nth-child(4){
transition-delay: 0.4s;
}
.wrap li:nth-child(5){
transition-delay: 0.5s;
}
.wrap li:nth-child(6){
transition-delay: 0.6s;
}
.wrap li:nth-child(7){
transition-delay: 0.7s;
}
.wrap li:nth-child(8){
transition-delay: 0.8s;
}
.wrap li:nth-child(9){
transition-delay: 0.9s;
}
.wrap li:nth-child(10){
transition-delay: 1s;
} */
span{
display: inline-block;
width: 30px;
height: 30px;
background-color: #0099ff;
text-align: center;
font-weight: bold;/*字體加粗*/
color: #fff;
}
style>
head>
<body>
<div class="wrap">
<ol>
<li><span>1span>htmlli>
<li><span>2span>htmlli>
<li><span>3span>htmlli>
<li><span>4span>htmlli>
<li><span>5span>htmlli>
<li><span>6span>htmlli>
<li><span>7span>htmlli>
<li><span>8span>htmlli>
<li><span>9span>htmlli>
<li><span>10span>htmlli>
ol>
div>
<script>
var oLi1=document.querySelectorAll(".wrap li");/*元素獲取*/
var oLi=document.getElementsByTagName("li");/*標(biāo)簽獲取*/
/*forEach()對(duì)數(shù)組每個(gè)元素都執(zhí)行一次提供的函數(shù)*/
[].forEach.call(oLi,function(e1,index){
e1.style.transitionDelay=index*0.08+"s"})
script>
body>
html>
View Code
---恢復(fù)內(nèi)容結(jié)束---
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1267.html
摘要：然而問(wèn)題是，這個(gè)法則在導(dǎo)航條的主體是可行的但是子選單因?yàn)榍懊嫣岬降娜龑忧短讟?gòu)造圓角，已經(jīng)無(wú)法減少嵌套了，同時(shí)還得考慮到子選單也是嵌套在導(dǎo)航條里的啊。。。同理，反過(guò)來(lái)進(jìn)入子選單時(shí)自然就用來(lái)抵消達(dá)到篩選的目的。 0x1setTimeout應(yīng)用 實(shí)現(xiàn)效果：4-01setTimeout應(yīng)用 又見(jiàn)導(dǎo)航條，先看下css，這里用的是雪碧圖背景做出圓角的效果，雖然是經(jīng)典的方法、兼容性好，但這種代碼寫(xiě)起...
摘要：在字符串模板中，如，我們得像這樣寫(xiě)一個(gè)條件塊模板可以用指令給添加一個(gè)塊指令隨機(jī)生成一個(gè)數(shù)字，判斷是否大于，然后輸出對(duì)應(yīng)信息在新增，顧名思義，用作的塊?？梢枣?zhǔn)降亩啻问褂弥噶铍S機(jī)生成一個(gè)數(shù)字，判斷是否大于，然后輸出對(duì)應(yīng)信息 條件判斷v-if 條件判斷使用 v-if 指令：v-if 指令 在元素 和 template 中使用 v-if 指令： 現(xiàn)在你看到我了 菜鳥(niǎo)教程 學(xué)的不僅是...
閱讀 736·2023-04-25 19:43
閱讀 3981·2021-11-30 14:52
閱讀 3807·2021-11-30 14:52
閱讀 3871·2021-11-29 11:00
閱讀 3802·2021-11-29 11:00
閱讀 3904·2021-11-29 11:00
閱讀 3580·2021-11-29 11:00
閱讀 6184·2021-11-29 11:00
