css製作導航欄
阿新 • • 發佈：2018-12-19
主要利用css中的transtion屬性，在滑鼠移動到時，改變偽元素的大小，字型的顏色
通過設定偽元素的陰影尺寸實現顏色收縮擴散的效果
<!DOCTYPE HTML> <head> <meta charset="utf-8"> <style> //設定.nav , .tab , li的樣式，瀏覽器一般會有預設的padding，所以.tab中的padding設定為0 .nav {margin: 100px;} .tab {margin: 0 auto; width:400px; height:40px; border: 1px solid #ddd; border-radius: 10px; text-align:center; line-height:40px; padding: 0px; overflow: hidden;} .tab li {float: left;width:100px;position: relative;overflow: hidden;} //設定li的偽元素，:before為豎線，:after為一個寬高為0的中心點，通過絕對位置absolute定位在li中 .tab li::after, .tab li::before {content: ''} .tab li:not(:first-child)::before {position: absolute; left: 0; top:10px; width:1px; height:20px; background: #ddd;} .tab li::after {position: absolute; width:0px; height:0px; top:50%; left:50%; z-index: 1;} //a設定為行內元素 .tab li a {position: relative; display: inline; z-index: 2; font-size: 14px; color: black; text-decoration: none;} .tab li::after, .tab li::before , .tab li a {transition: all 0.5s ease-in-out} //滑鼠移至偽元素與a時的變化 .tab li:hover::after {box-shadow: 0 0 0 100px #1202f7;} .tab li:hover::before, .tab li:hover+li::before {height: 0px; top:20px} .tab li:hover a {color: #ddd} </style> </head> <body> <div class='nav'> <ul class='tab'> <li><a href="">導航1</a></li> <li><a href="">導航2</a></li> <li><a href="">導航3</a></li> <li><a href="">導航4</a></li> </ul> </div> </body>