二级导航翻转效果：/*html*/<ul> <li>111</li> <li>222</li> <li>333 <ol> <li>444</li> <li>555</li> <li>666</li> </ol> </li></ul>/*css*/
li{ list-style: none; margin-right: 30px;}ul>li{ float: left;}ul>li:hover{ color:orange;}ul,ol{ padding: 0; margin: 0;}ol>li{ opacity: 0; transition: all 2s; transform: rotatey(180deg); color: blue; background: gainsboro;}ul>li:last-child:hover ol>li:first-child{ opacity: 1; transform: none; transition-delay: 0s;}ul>li:last-child:hover ol>li:nth-child(2){ opacity: 1; transform: none; transition-delay:200ms;}ul>li:last-child:hover ol>li:last-child{ opacity: 1; transform: none; transition-delay: 400ms;}
从文字下方中间添加下划线:/*html*/<ul class="box"> <li>ddd</li> <li>ff</li> <li>ggg</li></ul>/*css*/.box li{ list-style: none; float: left; text-align: center; margin-left: 10px; position: relative; padding-bottom: 20px;}从文字下方左边添加下划线:/*html*/<ul class="box1"> <li>ddd</li> <li>ff</li> <li>ggg</li></ul>/*css*/.box1 li{ list-style: none; float: left; width: 80px; text-align: center; margin-left: 100px; position: relative; padding-bottom: 20px; /*background: red;*/}.box1 li:before{ content:""; position:absolute ; /*border: 2px solid red;*/ width: 0; left:-100%; bottom: 0; transition: all linear 2s; /*display: none;*/}.box1 li:hover:before{ border: 2px solid red; width:100%; left:0;
转载于:https://www.cnblogs.com/huan123/p/8098719.html
