CSS侧边收缩导航栏
生活随笔
收集整理的這篇文章主要介紹了
CSS侧边收缩导航栏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果圖
代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}body{display: flex;justify-content: space-evenly;align-items: center;height: 100vh;}.box{/* margin-top: 100px; */height: 500px;width: 70px;background-color: #539ff5;border-radius: 10px;transition: 0.3s;}.box:hover{width: 195px;}.box a{/* overflow: hidden; */margin: 0 auto;line-height: 50px;color: rgb(71, 71, 71);height: 50px;width: 88%;border-radius: 5px;position: relative;}.box{overflow: hidden;display: flex;flex-direction: column;justify-content: space-around;}.box a:nth-of-type(1)::before,.box a:nth-of-type(5)::before{content: "";position: absolute;bottom: -8px;width: 100%;border-bottom: 1px solid rgb(165, 173, 201);}.box a img{vertical-align: middle;margin-left:15px;height: 35x;width: 35px;}.box span{position:absolute;white-space: nowrap;transition: 0.3s;opacity: 0;margin-left: 8px;top: 2px;}.box a:hover{color: black;background-color: rgba(204, 204, 204,0.5);}.box:hover span{opacity: 1;}</style> </head> <body><div class="box"><a href="#"><img src="icons/1.png" alt=""><span>list</span></a><a href="#"><img src="icons/2.png" alt=""><span>Warehous</span></a><a href="#"><img src="icons/3.png" alt=""><span>theme</span></a><a href="#"><img src="icons/4.png" alt=""><span>wallet</span></a><a href="#"><img src="icons/5.png" alt=""><span>picture</span></a><a href="#"><img src="icons/6.png" alt=""><span>OR code</span></a><a href="#"><img src="icons/7.png" alt=""><span>authentication</span></a><a href="#"><img src="icons/8.png" alt=""><span>cancellation</span></a></div> </body> </html>總結
以上是生活随笔為你收集整理的CSS侧边收缩导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 云IDE 使用体验，git项目快速启动实
- 下一篇： 组合数学学习（一）——排列组合和母函数经