网站导航
> 文章列表 > 【全屏导航栏菜单】

【全屏导航栏菜单】

网友: 文章列表 2024-03-21 20:28:36

【全屏导航栏菜单】

提示：全屏导航栏菜单,炫酷的全局动画和导航切换动画

 

前言

 

提示：以下是本篇文章的代码内容,供大家参考,相互学习

一、html代码

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>全屏导航栏菜单</title><link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="stylesheet" href="./css.css"></head><body><input type="checkbox" id="menu_btn"><label class="menu-btn" for="menu_btn"><i class="fa fa-bars"></i></label><div class="con"><h1>全屏覆盖导航栏</h1><h3>HTML + CSS</h3></div><div class="wrapper"><ul class="menu"><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li><li><a href="#">服务</a></li><li><a href="#">案例</a></li><li><a href="#">用户反馈</a></li></ul></div></body></html>

二、css代码

*{/* 初始化 取消页面的内外边距 */margin: 0;padding: 0;/* 这个是告诉浏览器：你想要设置的边框和内边距的值是包含在总宽高内的 */box-sizing: border-box;
}
.con{/* 弹性布局 水平、垂直居中 */display: flex;flex-direction: column;justify-content: center;align-items: center;/* 100%的窗口高度 */height: 100vh;/* 行高 */line-height: 80px;font-size: 30px;/* 字间距 */letter-spacing: 15px;
}
.wrapper{/* 固定定位 窗口滚动也不会移动 */position: fixed;top: 0;left: 0;width: 100%;height: 100%;/* 渐变背景 */background: linear-gradient(200deg,#ec77ab,#7873f5);/* 将元素剪切为一个圆形【25px表示圆的直径】【calc(100% - 45px) 45px表示圆心】 */clip-path: circle(25px at calc(100% - 45px) 45px);/* 过渡动画 */transition: all 0.3s ease-in-out;
}
.menu-btn{position: absolute;right: 20px;top: 20px;z-index: 2;/* 渐变背景 */background: linear-gradient(200deg,#ec77ab,#7873f5);width: 50px;height: 50px;text-align: center;line-height: 50px;border-radius: 50%;color: #fff;font-size: 20px;cursor: pointer;/* 这里也加个过渡动画 */transition: all 0.3s ease;
}
/* 把复选框隐藏 */
#menu_btn{display: none;
}
#menu_btn:checked ~ .wrapper{/* 将元素剪切为一个圆形 75%表示圆的直径 */clip-path: circle(75%);
}
#menu_btn:checked ~ .menu-btn{color: #d576ba;background: #fff;
}
/* 当复选框为选中态时，改变图标 */
#menu_btn:checked ~ .menu-btn i::before{content: "\\f00d";
}
.wrapper ul{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);list-style: none;text-align: center;
}
.wrapper ul li{margin: 30px 0px;
}
.wrapper ul li a{color: #fff;text-decoration: none;font-size: 30px;font-weight: 500;padding: 5px 50px;position: relative;line-height: 50px;
}
.wrapper ul li a::after{content: "";position: absolute;width: 100%;height: 50px;background: #fff;z-index: -1;border-radius: 50px;left: 0px;transform: scaleY(0);/* 加个动画过渡 */transition: transform 0.3s ease;
}
.wrapper ul li a:hover::after{transform: scaleY(1);
}
.wrapper ul li a:hover{color: #d576ba;
}

总结

  1. box-sizing 属性用于调整元素的盒模型。将其设置为 border-box 可以将 padding 和 border 包含在元素的总宽度和高度内。
  2. Flexbox 用于将元素水平和垂直居中在屏幕中央。flex 容器（.con）具有 display: flex、flex-direction: column、justify-content: center 和 align-items: center 属性。
  3. clip-path 属性用于将元素剪切为指定形状。在这里使用 circle() 函数将元素剪切为圆形。
  4. 渐变背景可以使用 linear-gradient() 函数来创建。
  5. position 属性用于指定元素的定位方式，包括 static、relative、absolute 和 fixed 等。
  6. transition 属性用于为元素的属性添加过渡动画效果。
  7. ::before 和 ::after 伪元素用于在元素的前面或后面插入内容。
  8. z-index 属性用于控制元素的堆叠顺序，具有较高的值将显示在较低的值上面。
  9. text-decoration 属性用于为文本添加下划线、删除线等效果。
  10. font-size、font-weight、color、padding、margin 和 line-height 等属性用于控制文本和元素的样式和间距。 11.:hover 伪类用于在鼠标悬停在元素上时改变元素的样式。
  11. 响应式设计可以通过 media queries 实现，在不同的设备或屏幕尺寸上显示不同的样式。
网络标签：

相关问题