css旋转导航的示例代码

发布时间：2023-04-27 17:07:52 作者： codePanda

我要评论

本文主要介绍了css旋转导航的示例代码，文中通过示例代码介绍的非常详细，该导航可用在一些网站首页导航栏中，需要的朋友们下面随着小编来一起学习学习吧

前言

今天刷视频看到一个有趣的css导航菜单，于是乎便拿来一起分享分享，老样子先看效果图：

1682067868469 -original-original.gif

接下来让我们一步步实现它。

页面布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转菜单</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 菜单部分 -->
    <nav class="menu">
        <input checked="checked" class="menu-toggler" id="menu-toggler" type="checkbox">
        <label for="menu-toggler"></label>
        <ul>
            <li class="menu-item">
                <a class="fa-brands fa-facebook" href="#"></a>
            </li>
            <li class="menu-item">
                <a class="fa-brands fa-twitter" href="#"></a>
            </li>
            <li class="menu-item">
                <a class="fa-brands fa-instagram" href="#"></a>
            </li>
            <li class="menu-item">
                <a class="fa-brands fa-github" href="#"></a>
            </li>
            <li class="menu-item">
                <a class="fa-brands fa-youtube" href="#"></a>
            </li>
            <li class="menu-item">
                <a class="fa-brands fa-tiktok" href="#"></a>
            </li>
        </ul>
    </nav>
</body>
</html>

这里<nav>定义一个导航菜单，<input>定义一个复选框，用于控制菜单的显示和隐藏，<label>与复选框关联，用于触发复选框的选中状态，<ul>定义一个无序列表，用于存放菜单项，<li>用于包含一个菜单项， <a>用于链接到其他页面或位置，class="menu"定义了一个 CSS 类，用于对导航菜单进行样式设置，class="menu-toggler"用于对复选框进行样式设置，id="menu-toggler"：定义了一个 ID，用于与标签进行关联，class="menu-item"用于对菜单项进行样式设置，同时这里各菜单选项的图标是采用font-awesome图标库的图标。
写完页面结构后，此时页面：

接下来对各元素进行样式设置。

样式部分

对中心菜单展开选择元素进行设置：

body {
    overflow: hidden;
    background: linear-gradient(to right, #55c883, #4fccc4);
}
.menu-toggler {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    z-index: 2;
    opacity: 0;
    cursor: pointer;
}
.menu-toggler + label {
    width: 40px;
    height: 5px;
    display: block;
    z-index: 1;
    border-radius: 2.5px;
    background: rgba(255, 255, 255, 0.7);
    transition: transform 0.5s, top 0.5s;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
.menu-toggler + label:before, .menu-toggler + label:after {
    width: 40px;
    height: 5px;
    display: block;
    z-index: 1;
    border-radius: 2.5px;
    background: rgba(255, 255, 255, 0.7);
    transition: transform 0.5s, top 0.5s;
    content: "";
    position: absolute;
    left: 0;
}
.menu-toggler + label:before {
    top: 10px;
}
.menu-toggler + label:after {
    top: -10px;
}
.menu-toggler:hover + label, .menu-toggler:hover + label:before, .menu-toggler:hover + label:after {
    background: white;
}
.menu-toggler:checked + label {
    background: transparent;
}
.menu-toggler:checked + label:before, .menu-toggler:checked + label:after {
    top: 0;
    width: 40px;
    transform-origin: 50% 50%;
}
.menu-toggler:checked + label:before {
    transform: rotate(45deg);
}
.menu-toggler:checked + label:after {
    transform: rotate(-45deg);
}

overflow: hidden;：将页面的滚动条隐藏。
background: linear-gradient(to right, #55c883, #4fccc4);：设置页面的背景颜色为从左到右渐变的绿色。
对复选框进行样式设置：.menu-toggler。
- position: absolute;：将复选框设置为绝对定位，以便进行居中显示。
- display: block;：将复选框设置为块级元素，以便设置宽度和高度。
- top: 0; bottom: 0; right: 0; left: 0;：将复选框的上下左右都设置为 0，以便进行居中显示。
- margin: auto;：将复选框的外边距设置为 auto，以便进行水平和垂直居中。
- width: 40px; height: 40px;：设置复选框的宽度和高度为 40 像素。
- z-index: 2;：将复选框的层级设置为 2，使其显示在菜单项之上。
- opacity: 0;：将复选框的透明度设置为 0，使其不可见。
- cursor: pointer;：将鼠标指针的样式设置为手型，以便提示用户可以进行单击操作。
.menu-toggler + label：对关联的标签进行样式设置。
- width: 40px; height: 5px;：设置标签的宽度为 40 像素，高度为 5 像素。
- display: block;：将标签设置为块级元素，以便设置宽度和高度。
- z-index: 1;：将标签的层级设置为 1，使其显示在菜单项之下。
- border-radius: 2.5px;：将标签的边框半径设置为 2.5 像素，以便显示圆角。
- background: rgba(255, 255, 255, 0.7);：设置标签的背景颜色为半透明的白色。
- transition: transform 0.5s, top 0.5s;：设置标签的变换过渡效果为 0.5 秒，包括 transform 和 top 属性。
- position: absolute;：将标签设置为绝对定位，以便进行居中显示。
- top: 0; bottom: 0; right: 0; left: 0;：将标签的上下左右都设置为 0，以便进行居中显示。
- margin: auto;：将标签的外边距设置为 auto，以便进行水平和垂直居中。
.menu-toggler + label:before, .menu-toggler + label:after：对标签的伪元素进行样式设置。
- width: 40px; height: 5px;：设置伪元素的宽度为 40 像素，高度为 5 像素。
- display: block;：将伪元素设置为块级元素，以便设置宽度和高度。
- z-index: 1;：将伪元素的层级设置为 1，使其显示在菜单项之下。
- border-radius: 2.5px;：将伪元素的边框半径设置为 2.5 像素，以便显示圆角。
- background: rgba(255, 255, 255, 0.7);：设置伪元素的背景颜色为半透明的白色。
- transition: transform 0.5s, top 0.5s;：设置伪元素的变换过渡效果为 0.5 秒，包括 transform 和 top 属性。
- content: "";：将伪元素的内容设置为空。
- position: absolute;：将伪元素设置为绝对定位，以便进行居中显示。
- left: 0;：将伪元素的左侧位置设置为 0。
.menu-toggler + label:before：对标签的第一个伪元素进行样式设置。
- top: 10px;：将伪元素的顶部位置设置为 10 像素。
.menu-toggler + label:after：对标签的第二个伪元素进行样式设置。
- top: -10px;：将伪元素的顶部位置设置为 -10 像素。
.menu-toggler:hover + label, .menu-toggler:hover + label:before, .menu-toggler:hover + label:after：对鼠标悬停在复选框或标签上时的样式进行设置。
- background: white;：将背景颜色设置为白色。
.menu-toggler:checked + label：对复选框选中时的标签样式进行设置。
- background: transparent;：将背景颜色设置为透明。
.menu-toggler:checked + label:before, .menu-toggler:checked + label:after：对复选框选中时的标签伪元素进行样式设置。
- top: 0;：将伪元素的顶部位置设置为 0，以便显示为横线。
- width: 40px;：将伪元素的宽度设置为 40 像素，以便显示为横线。
- transform-origin: 50% 50%;：将伪元素的变换原点设置为中心点。
.menu-toggler:checked + label:before：对复选框选中时的标签第一个伪元素进行样式设置。
- transform: rotate(45deg);：将伪元素顺时针旋转 45 度，以便显示为斜线。
.menu-toggler:checked + label:after：对复选框选中时的标签第二个伪元素进行样式设置。
- transform: rotate(-45deg);：将伪元素逆时针旋转 45 度，以便显示为斜线。

以上样式实现思路为，采用绝对定位对该元素进行定位居于页面中心，当复选框未被选中时，利用label及其伪元素实现三条横线的展示，当选中时，对两个伪元素分别进行顺逆时针的旋转，形成第二张图的效果，另外当是鼠标悬停时，会对背景颜色在透明与白色之间切换，以上已经对于各个属性及其主要作用进行了解释。此时效果：

选中时：

接下来对各菜单选项进行样式设置：

.menu-toggler:checked ~ ul .menu-item {
    opacity: 1;
}
.menu-toggler:checked ~ ul .menu-item:nth-child(1) {
    transform: rotate(0deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(2) {
    transform: rotate(60deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(3) {
    transform: rotate(120deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(4) {
    transform: rotate(180deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(5) {
    transform: rotate(240deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(6) {
    transform: rotate(300deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item a {
    pointer-events: auto;
}
.menu-item:nth-child(1) a {
    transform: rotate(0deg);
}
.menu-item:nth-child(2) a {
    transform: rotate(-60deg);
}
.menu-item:nth-child(3) a {
    transform: rotate(-120deg);
}
.menu-item:nth-child(4) a {
    transform: rotate(-180deg);
}
.menu-item:nth-child(5) a {
    transform: rotate(-240deg);
}
.menu-item:nth-child(6) a {
    transform: rotate(-300deg);
}
.menu-item {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 80px;
    height: 80px;
    opacity: 0;
    transition: 0.5s;
}
.menu-item a {
    display: block;
    width: inherit;
    height: inherit;
    line-height: 80px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    font-size: 40px;
    pointer-events: none;
    transition: 0.2s;
}
.menu-item a:hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
    color: white;
    background: rgba(255, 255, 255, 0.3);
    font-size: 44.44px;
}

以上代码是对菜单选项进行设置，初始时，菜单选项opacity: 0;即进行隐藏，当复选框被选中时，改变透明度的值为opacity: 1;使其展现出来，同时，对所有选项在x轴上进行一定偏移，并且为每个选项设置单独的旋转角度，使得选项围绕中心复选框，同时由于菜单选项的角度旋转会导致超链接的图标也角度也有偏移，需再对各图标进行一定角度的旋转，以上样式主要是旋转，样式代码比较容易理解，其中.menu-toggler:checked ~ ul .menu-item是复合选择器选中紧接着被选中的.menu-toggler 元素后面的同级 ul 元素中的所有 class 为 .menu-item的元素,transition设置过渡动画时长，其余就不过多叙述了。

结语

到此这篇关于css旋转导航的示例代码的文章就介绍到这了,更多相关css旋转导航内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

Tag：旋转导航 css

CSS+HTML 实现顶部导航栏功能
这篇文章主要介绍了CSS+HTML 实现顶部导航栏功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-08-24
教你做个可爱的css滑动导航条
今天来带大家做一个可爱的滑动导航栏效果，这个demo很基础，但是使用场景非常广泛，感兴趣的小伙伴们可以参考一下
2021-06-15
CSS实现移动端横向滚动导航条(PC端也适用)
这篇文章主要介绍了CSS实现移动端横向滚动导航条(PC端也适用)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编
2021-03-17
CSS 带搜索导航栏的示例代码
这篇文章主要介绍了CSS 带搜索导航栏的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习
2021-02-22
不可思议的CSS导航栏下划线跟随效果
这篇文章主要介绍了纯CSS实现导航栏下划线跟随效果，本文图文并茂实例代码详解，给大家介绍的非常详细，需要的朋友参考下吧
2019-12-09
css实现流程导航效果(三种方法)
本文通过三种方法给大家介绍css实现流程导航效果，非常不错，具有一定的参考借鉴价值，需要的朋友参考下
2019-11-13
html+css 实现简易导航栏功能
这篇文章主要介绍了基于html+css 实现简易导航栏功能，主要就是css（级联样式表）对html的内容做格式化。具体内容详情大家跟随小编一起通过本文学习吧
2021-04-07
css实现导航切换的实例代码
本文通过实例代码给大家介绍了css实现导航切换效果，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-08-15
css实现电梯导航的项目实践
CSS梯形导航图是一种使用 CSS 布局实现的导航设计,可以根据需要灵活调整导航菜单的上下位置和大小，本文主要介绍了css实现电梯导航，具有一定的参考价值，感兴趣的可以了解
2023-05-06

css旋转导航的示例代码

前言

页面布局

样式部分

结语

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容