| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| <style> | |
| ul { | |
| padding: 0px; | |
| list-style: none; | |
| } | |
| ul > li { | |
| height: 48px; | |
| float: left; | |
| width: 120px; | |
| transform-style: preserve-3d;/*3d效果*/ | |
| transition: all,2s; | |
| } | |
| ul > li span{ | |
| height: 48px; | |
| line-height: 48px; | |
| width: 120px; | |
| text-align: center; | |
| position: absolute; | |
| display: inline-block; | |
| } | |
| ul > li span:nth-child(1){ | |
| background-color: #5CADFF; | |
| transform:rotateX(90deg) translateZ(27px); | |
| } | |
| ul > li span:nth-child(2){ | |
| background-color: purple; | |
| transform:translateZ(27px); | |
| } | |
| li:hover{ | |
| transform: rotateX(-90deg); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul> | |
| <li> | |
| <span>aaaa</span> | |
| <span>bbbb</span> | |
| </li> | |
| <li> | |
| <span>aaaa</span> | |
| <span>bbbb</span> | |
| </li> | |
| <li> | |
| <span>aaaa</span> | |
| <span>bbbb</span> | |
| </li> | |
| <li> | |
| <span>aaaa</span> | |
| <span>bbbb</span> | |
| </li> | |
| <li> | |
| <span>aaaa</span> | |
| <span>bbbb</span> | |
| </li> | |
| </ul> | |
| </body> | |
| </html> |
3D的导航栏(动画)
猜你喜欢
转载自blog.csdn.net/qq_35307947/article/details/81327470
今日推荐
周排行