扇形特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>扇形导航</title> <style> *{ margin: 0; padding: 0; } a { text-align: right; text-decoration: none; color: #000 !important; } ul { list-style: none; } .menu { width: 100px; height: 100px; border-radius:0 0 100px 0; background-color: #ddd; position: relative; left:100px; top:100px; } .menu ul { position: absolute; width: 0; height: 0; left: 0; top: 0; } .menu ul li { width: 0; height: 0; } ul.menu1 { width: 100px; height: 100px; overflow: hidden; z-index: 3; } .menu1>li>a{ display: block; width: 100px; height: 100px; z-index: 3; position: absolute; border-radius:0 0 100px 0; background-color: #666; } .menu1:hover { width: 300px; height: 300px; } .menu1:hover>li>a{ background-color: red; } .menu1:hover .menu2{ transform: rotate(0); transition: all 1s; } .menu1>li .menu2>li:hover>a{ background-color: red; } .menu2{ transform: rotate(90deg); } .menu2>li>a{ position: absolute; width: 200px; height: 200px; border-radius: 0 0 300px 0; transform-origin:left top; z-index: 2; } .menu2>li:nth-child(1)>a{ background-color: #ddd; transform: rotate(0deg); } .menu2>li:nth-child(2)>a{ background-color: #ccc; transform: rotate(15deg); } .menu2>li:nth-child(3)>a{ background-color: #bbb; transform: rotate(30deg); } .menu2>li:nth-child(4)>a{ background-color: #aaa; transform: rotate(45deg); } .menu2>li:nth-child(5)>a{ background-color: #999; transform: rotate(60deg); } .menu2>li:nth-child(6)>a{ background-color: #888; transform: rotate(75deg); } .menu2>li:hover .menu3{ transform: rotate(0deg); transition: all 1s; } .menu1 .menu2 .menu3 li:hover a{ background-color: #f00; } .menu3 { transform: rotate(90deg); z-index: -100; } .menu3>li>a{ width: 300px; height: 300px; border-radius: 0 0 300px 0; position: absolute; transform-origin:left top; } .menu3>li:nth-child(1)>a{ transform: rotate(0deg); background-color: #999; } .menu3>li:nth-child(2)>a{ transform: rotate(30deg); background-color: #888; } .menu3>li:nth-child(3)>a{ transform: rotate(60deg); background-color: #777; } </style> </head> <body> <div class="menu"> <div class="menu0"> <ul class="menu1"> <li> <a href="#">home</a> <ul class="menu2"> <li> <a href="#">二级导航</a> <ul class="menu3"> <li><a href="#">三级导航</a></li> <li><a href="#">三级导航</a></li> <li><a href="#">三级导航</a></li> </ul> </li> <li> <a href="#">二级导航</a> <ul class="menu3"> <li><a href="#">三级导航</a></li> <li><a href="#">三级导航</a></li> <li><a href="#">三级导航</a></li> </ul> </li> <li> <a href="#">二级导航</a> <ul class="menu3"> <li><a href="#">三级导航</a></li> <li><a href="#">三级导航</a></li> <li><a href="#">三级导航</a></li> </ul> </li> <li> <a href="#">二级导航</a> <ul class="menu3"> <li><a href="#">三级导航</a></li> <li><a href="#">三级导航</a></li> <li><a href="#">三级导航</a></li> </ul> </li> <li> <a href="#">二级导航</a> <ul class="menu3"> <li><a href="#">三级导航</a></li> <li><a href="#">三级导航</a></li> <li><a href="#">三级导航</a></li> </ul> </li> <li> <a href="#">二级导航</a> <ul class="menu3"> <li><a href="#">三级导航</a></li> <li><a href="#">三级导航</a></li> <li><a href="#">三级导航</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </body> </html>