不规则导航特效
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab Bar Menu Animation</title> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400&display=swap'> <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'> <style> * { font-family: "Roboto Condensed", sans-serif; } html, body { height: 100%; } body { margin: 0; padding: 0; background-color: #7dbfff; /* for center */ display: flex; align-items: center; justify-content: center; } .navigation-tab { height: 150px; width: 600px; background-color: #fff; box-shadow: 0 50px 30px 0 rgba(0, 0, 0, 0.175); border-radius: 20px 20px 90px 90px; overflow: hidden; border: 15px solid #fff; display: flex; position: relative; flex-shrink: 0; } .navigation-tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 130px; flex-shrink: 0; cursor: pointer; transition: 0.3s; position: relative; z-index: 2; } .navigation-tab-item.active { width: 210px; } .navigation-tab-item.active .navigation-tab__icon { transform: translate(0px, -10px); } .navigation-tab-item.active .navigation-tab__txt { opacity: 1; transform: translate(0, 10px); } .navigation-tab-overlay { border-radius: 20px; background-color: #e4f2ff; height: 100%; width: 210px; position: absolute; left: 0; top: 0; transition: 0.3s; } .navigation-tab__icon { display: block; color: #4298e7; transition-duration: 0.3s; line-height: 1; transform: translate(0, 11px); } .navigation-tab__txt { display: block; font-weight: 400; font-size: 20px; color: #4298e7; opacity: 0; transition-duration: 0.3s; transform: translate(0, 20px); user-select: none; } </style> </head> <body translate="no"> <nav class="navigation-tab"> <div class="navigation-tab-item active"> <span class="navigation-tab__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"> <line x1="8" y1="6" x2="21" y2="6"></line> <line x1="8" y1="12" x2="21" y2="12"></line> <line x1="8" y1="18" x2="21" y2="18"></line> <line x1="3" y1="6" x2="3" y2="6"><.........完整代码请登录后点击上方下载按钮下载查看
网友评论0