第四课 波浪导航条
程序员文章站
2022-06-30 23:46:05
恢复内容开始 一、效果 二、知识点 1、line-height:1;/*清除默认高度*/ 2、font-weight: bold;/*字体加粗*/ 3、transition-delay: 0.1s;延迟动画过渡 4、:nth-child(1)按下标选取集合元素的子元素 5、一般用于没有实 ......
---恢复内容开始---
一、效果
二、知识点
1、line-height:1;/*清除默认高度*/
2、font-weight: bold;/*字体加粗*/
3、transition-delay: 0.1s;延迟动画过渡
4、:nth-child(1)按下标选取集合元素的子元素
5、<span>一般用于没有实际意义的文本,修饰文本,比如标号
6、var oli1=document.queryselectorall(".wrap li");/*元素获取*/
var oli=document.getelementsbytagname("li");/*标签获取*/
7、foreach()对数组每个元素都执行一次提供的函数
三、源码
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="关键词"> <meta name="description" content="描述"> <title>波浪导航条</title> <style> body{ margin: 0; padding: 0; height: 2000px; line-height:1;/*清除默认高度*/ } .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来写特效,简单有维护性*/ /* .wrap li:nth-child(1){:nth-child(1)按下标选取集合元素的子元素 transition-delay: 0;延迟动画过渡 } .wrap li:nth-child(2){:nth-child(1)按下标选取集合元素的子元素 transition-delay: 0.2s;延迟动画过渡 } .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>1</span>html</li><!-- <span>一般用于没有实际意义的文本,修饰文本,比如标号 --> <li><span>2</span>html</li> <li><span>3</span>html</li> <li><span>4</span>html</li> <li><span>5</span>html</li> <li><span>6</span>html</li> <li><span>7</span>html</li> <li><span>8</span>html</li> <li><span>9</span>html</li> <li><span>10</span>html</li> </ol> </div> <script> var oli1=document.queryselectorall(".wrap li");/*元素获取*/ var oli=document.getelementsbytagname("li");/*标签获取*/ /*foreach()对数组每个元素都执行一次提供的函数*/ [].foreach.call(oli,function(e1,index){ e1.style.transitiondelay=index*0.08+"s"}) </script> </body> </html>
---恢复内容结束---
上一篇: 做人实实在在就好