純CSS程式碼實現翻轉選單的炫酷效果
阿新 • • 發佈:2018-11-07
1、思路分析
- 滑鼠移入選單出現並翻轉
- 滑鼠移出收回選單
2、完整程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>翻轉選單-綜合練習</title> <style> *{ margin: 0; padding: 0; } .nav{ width: 400px; height: 40px; background-color: #3c3c3c; color: white; margin: 0 auto; line-height: 50px; margin-top: 100px; } div{ width: 400px; height: 300px; box-sizing: border-box; border: 1px solid #000; background-color: pink; margin: 0 auto; } .nav>li{ width: 120px; line-height: 40px; text-align: center; box-sizing: border-box; background-color: grey; float: left; margin-left: 10px; position: relative; } ul li{ width: 80px; height: 40px; display: inline-block; } /*.sub{*/ /*display: none;*/ /*}*/ .sub{ left: 0; top: 40px; } .sub li{ width: 120px; height: 40px; display: inline-block; list-style: none; background-color: rgba(0,0,0,0.7); transform: rotateY(180deg); transition: all 1s; opacity: 0; } .nav>li:hover .sub li{ /*透明度*/ opacity: 1; } .nav>li:hover .sub li{ transform: none; } .nav>li:hover .sub li:nth-child(1) { transition-delay: 0s; } .nav>li:hover .sub li:nth-child(2){ transition-delay: 0.2s; } .nav>li:hover .sub li:nth-child(3){ transition-delay: 0.4s; } .nav>li:hover .sub li:nth-child(4){ transition-delay: 0.6s; } .nav>li:hover .sub li:nth-child(5){ transition-delay: 0.8s; } .nav>li .sub li:nth-child(1) { transition-delay: 0.8s; } .nav>li .sub li:nth-child(2){ transition-delay: 0.6s; } .nav>li .sub li:nth-child(3){ transition-delay: 0.4s; } .nav>li .sub li:nth-child(4){ transition-delay: 0.2s; } .nav>li .sub li:nth-child(5){ transition-delay: 0s; } </style> </head> <body> <ul class="nav"> <li>一級選單 <ul class="sub"> <li>二級選單</li> <li>二級選單</li> <li>二級選單</li> <li>二級選單</li> <li>二級選單</li> </ul> </li> <li>一級選單 <ul class="sub"> <li>二級選單</li> <li>二級選單</li> <li>二級選單</li> <li>二級選單</li> <li>二級選單</li> </ul> </li> <li>一級選單 <ul class="sub"> <li>二級選單</li> <li>二級選單</li> <li>二級選單</li> <li>二級選單</li> <li>二級選單</li> </ul></li> </ul> <div>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div> </body> </html>
3、效果圖