【前端设计】炫酷导航栏

欢迎来到前端设计专栏,本专栏收藏了一些好看且实用的前端作品,使用简单的html、css语法打造创意有趣的作品,为网站加入更多高级创意的元素。

html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="nav.css">
</head>
<body>
    <div class="wrapper">
        <nav>
            <input type="radio" name="tab" id="home" checked>
            <input type="radio" name="tab" id="thumbs">
            <input type="radio" name="tab" id="share">
            <input type="radio" name="tab" id="collection">
            <input type="radio" name="tab" id="comments">
            <label for="home" class="home">
                <a href="#">首页</a>
            </label>
            <label for="thumbs" class="thumbs">
                <a href="#">点赞</a>
            </label>
            <label for="share" class="share">
                <a href="#">分享</a>
            </label>
            <label for="collection" class="collection">
                <a href="#">收藏</a>
            </label>
            <label for="comments" class="comments">
                <a href="#">评论</a>
            </label>
            <div class="active"></div>
        </nav>
    </div>
</body>
</html>

css

css 复制代码
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  line-height: 60px;
}
.wrapper {
  height: 60px;
  width: 55vw;
  background-color: #eff;
  box-shadow: 0 6px 16px ;
  box-shadow: 0 6px 16px #0000003f;
  border-radius: 30px;
}

.wrapper nav {
    display: flex;
    position: relative;
}
.wrapper nav label{
    flex: 1;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.wrapper nav label a{
    color: #1d1f60;
    font-size: 21px;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    z-index: -1;
}
.wrapper nav label a i{
    font-size: 21px;
    margin: 0 6px 0 29px;
}
.wrapper nav .active{
    position: absolute;
    background: linear-gradient(45deg,#06ace0 0%,#8600e6 100%);
    height: 100%;
    width: 20%;
    left: 0;
    bottom: 0;
    border-radius: 30px;
    transition: 0.6s cubic-bezier(0.6, -0.6, 0.26, 1.6);
}
.wrapper nav #home:checked ~ label.home a,
.wrapper nav #thumbs:checked ~ label.thumbs a,
.wrapper nav #share:checked ~ label.share a,
.wrapper nav #collection:checked ~ label.collection a,
.wrapper nav #comments:checked ~ label.comments a{
    color: #fff;
}
.wrapper nav #thumbs:checked ~ .active{
    left: 20%;
}
.wrapper nav #share:checked ~ .active{
    left: 40%; 
}
.wrapper nav #collection:checked ~ .active{
    left: 60%;
}
.wrapper nav #comments:checked ~ .active{
    left: 80%;
}

.wrapper nav input{
    display: none;
}
相关推荐
云浪4 分钟前
掌握 CSS 倾斜函数
前端·css
ai产品老杨11 分钟前
实现自动化管理、智能控制、运行服务的智慧能源开源了。
前端·javascript·vue.js·前端框架·ecmascript
唐诗12 分钟前
优化 Nextjs 开发的个人博客首页,秒开!
前端·next.js
飞川撸码14 分钟前
web vue 项目 Docker化部署
前端·vue.js·docker·运维开发
默默无闻的白夜16 分钟前
【Vue】初学Vue(setup函数,数据响应式, 脚手架 )
前端·javascript·vue.js
萌萌哒草头将军21 分钟前
⚡⚡⚡Rstack 家族即将迎来新成员 Rstest🚀🚀🚀
前端·javascript·vue.js
江城开朗的豌豆30 分钟前
Proxy:JavaScript中的'变形金刚',让你的对象为所欲为!
前端·javascript·面试
江城开朗的豌豆38 分钟前
JavaScript中的instanceof:你的代码真的认识'自家孩子'吗?
前端·javascript·面试
JinSo40 分钟前
create-easy-editor —— 快速搭建你的可视化编辑器
前端·前端框架·github
Watermelo6171 小时前
【前端实战】如何让用户回到上次阅读的位置?
前端·javascript·性能优化·数据分析·哈希算法·哈希·用户体验