您正在使用 IPV4 [18.209.209.246] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
css旋转导航的示例代码
内容摘要: 页面布局!DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'title旋转菜单/titlelinkrel='stylesheet'href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'integrity='sh......
页面布局

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>旋转菜单</title>

<linkrel="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"/>

<linkrel="stylesheet"href="style.css">

</head>

<body>

<!--菜单部分-->

<navclass="menu">

<inputchecked="checked"class="menu-toggler"id="menu-toggler"type="checkbox">

<labelfor="menu-toggler"></label>

<ul>

<liclass="menu-item">

<aclass="fa-brandsfa-facebook"href="#"></a>

</li>

<liclass="menu-item">

<aclass="fa-brandsfa-twitter"href="#"></a>

</li>

<liclass="menu-item">

<aclass="fa-brandsfa-instagram"href="#"></a>

</li>

<liclass="menu-item">

<aclass="fa-brandsfa-github"href="#"></a>

</li>

<liclass="menu-item">

<aclass="fa-brandsfa-youtube"href="#"></a>

</li>

<liclass="menu-item">

<aclass="fa-brandsfa-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图标库的图标。

写完页面结构后,此时页面:

image.png

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

样式部分

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

body{

overflow:hidden;

background:linear-gradient(toright,#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:transform0.5s,top0.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:transform0.5s,top0.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(toright,#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:transform0.5s,top0.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:transform0.5s,top0.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-itema{

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-itema{

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-itema:hover{

box-shadow:0002pxrgba(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实现按钮边缘跑马灯动画

 

下一篇:JS实现简单表格排序操作示例

发布日期:2023/5/2
手机扫二维码直达本页
发布时间:13:04:18
点  击:11
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....