tailwindcss实现图标导航条效果代码
代码语言:html
所属分类:菜单导航
代码描述:tailwindcss实现图标导航条效果代码,结合了all图标库,实现图标悬浮菜单。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css"> </head> <body > <div class="bg-gradient-to-tr from-indigo-500 to-pink-500 w-screen h-screen flex"> <div class="bg-black/30 w-96 m-auto flex justify-stretch rounded-md shadow-lg backdrop-blur"> <a href="#" class="text-slate-200 hover:text-white hover:bg-black/20 w-1/4 py-3 flex flex-col items-center hover:scale-110 rounded-md transition-all"> <i class="fa-solid fa-house"></i> <small>Home</small> </a> <a href="#" class="text-slate-200 hover:text-white hover:bg-black/20 w-1/4 py-3.........完整代码请登录后点击上方下载按钮下载查看
网友评论0