导航下滑线跟随滑动 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style>
10         .underline-navbar {
11             display: flex;
12         }
13 
14 
15         li {
16             position: relative;
17             padding: 10px;
18             cursor: pointer;
19             font-size: 20px;
20             color: #09f;
21             list-style: none;
22         }
23 
24 
25         li::before {
26             position: absolute;
27             left: 0;
28             top: 0;
29             border-bottom: 2px solid transparent;
30             width: 0;
31             height: 100%;
32             content: "";
33             transition: all 300ms 100ms;
34         }
35 
36         li:active {
37             background-color: #09f;
38             color: #fff;
39         }
40 
41         li:hover+li::before {
42             left: 0;
43         }
44 
45         li:hover::before {
46             left: 0;
47             top: 0;
48             z-index: -1;
49             /* 颜色设置在hover这里：Hover时颜色渐显，消失时渐淡 。直接设置在li::before里没有这个效果*/
50             border-bottom-color: #09f; 
51             width: 100%;
52         }
53     </style>
54 </head>
55 
56 <body>
57     <div class="bruce flex-ct-x">
58         <ul class="underline-navbar">
59             <li>Alibaba阿里巴巴</li>
60             <li>Tencent腾讯</li>
61             <li>Baidu百度</li>
62             <li>Jingdong京东</li>
63             <li>Ant蚂蚁金服</li>
64             <li>Netease网易</li>
65         </ul>
66     </div>
67 </body>
68 
69 </html>

 

posted @ 2020-03-12 15:33  今夜你是我的模特  阅读(74)  评论(0)    收藏  举报