纯css模拟app导航效果
代码语言:html
所属分类:菜单导航
代码描述:纯css模拟app导航效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" /> <style> *, *:after, *:before { box-sizing: border-box; } .container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } body { font-family: "Inter", sans-serif; color: #303030; background-color: #f5f5fb; } .menu { display: -webkit-box; display: flex; -webkit-box-flex: 1; flex-grow: 1; height: 72px; max-width: 370px; border-radius: 12px; overflow: hidden; background-color: #fff; box-shadow: 0 0 1px 0 rgba(52, 46, 173, 0.25), 0 15px 30px 0 rgba(52, 46, 173, 0.1); } .menu-item { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; -webkit-box-flex: 1; flex-grow: 1; text-decoration: none; } .menu-item:focus, .menu-ite.........完整代码请登录后点击上方下载按钮下载查看
网友评论0