导航页面设计/课程

导航页面设计/课程免费下载 在 HTML、CSS 和 JavaScript 中

HTML：

 部分导航  
 h1 前沿趋势  
 h3.span.loader  
 跨度.m B  
 跨度.m E  
 跨度.m N  
 跨度.m E  
 跨度.m F  
 跨度.m I  
 跨度.m T  
 跨度.m S  
 跨度.m  
 跨度.mo  
 跨度.mf  
 跨度.m  
 跨度.m T  
 跨度.m E  
 跨度.m C  
 跨度.m H  
 跨度.m N  
 跨度.m O  
 跨度.m L  
 跨度.m O  
 跨度.m G  
 跨度.m I  
 跨度.m E  
 跨度.m S  
 .nav 容器  
 a.nav-tab(href="#tab-svelte") SVELTE  
 a.nav-tab(href="#tab-esbuild") ESBUILD  
 a.nav-tab(href="#tab-next") NEXT.JS  
 a.nav-tab(href="#tab-typescript") 类型脚本  
 a.nav-tab(href="#tab-vite") VITE  
 span.nav-tab-slider  
 main.main  
 部分#tab-svelte.slider  
 h1 SVELTE  
 h2 另一个前端 JS 框架  
 部分#tab-esbuild.slider  
 h1 ESBUILD  
 h2 一个非常快速的 JavaScript 打包器  
 section#tab-next.slider  
 h1 下一个.JS  
 用于生产的 h2 框架  
 部分#tab-typescript.slider  
 h1 打字稿  
 h2 为您提供任何规模的更好工具  
 部分#tab-vite.slider  
 h1 快速  
 h2 一个前端构建工具  
 画布.背景

CSS：

 * {  
 边距：0；  
 填充：0；  
 box-sizing：边框框；  
 } 身体 {  
 字体家族：“机器人”，无衬线；  
 } .导航,  
 .滑块{  
 显示：弯曲；  
 弹性方向：列；  
 证明内容：中心；  
 对齐项目：居中；  
 高度：100vh；  
 位置：相对；  
 背景颜色：#1e1f26；  
 文本对齐：居中；  
 填充：0 2em；  
 } .nav h1,  
 .滑块 h1 {  
 font-family: "Josefin Sans", sans-serif;  
 字体大小：5vw；  
 边距：0；  
 底部填充：0.5rem；  
 字母间距：0.5rem；  
 颜色：#03dac6；  
 过渡：所有0.3s缓和；  
 z指数：3；  
 }  
 h1：悬停{  
 变换： translate3d(0, -10px, 22px);  
 颜色：#ff0266；  
 } .滑块 h2 {  
 字体大小：2vw；  
 字母间距：0.3rem；  
 字体家族：“机器人”，无衬线；  
 字体粗细：300；  
 颜色：#faebd7；  
 z 指数：4；  
 }  
 h3.span {  
 字体大小：2vw；  
 字母间距：0.7em；  
 字体家族：“机器人”，无衬线；  
 字体粗细：300；  
 颜色：#faebd7；  
 z 指数：4；  
 }  
 跨度：悬停{  
 颜色：#ff0266；  
 字体粗细：500；  
 字体大小：2.2vw；  
 } 一个 {  
 文字装饰：无；  
 } .导航容器{  
 显示：弯曲；  
 弹性方向：行；  
 位置：绝对；  
 底部：0；  
 宽度：100%；  
 高度：75px；  
 盒子阴影：20px 20px 50px rgba(0, 0, 0, 0.5);  
 背景：#1e1f26；  
 z 指数：10；  
 过渡：所有 0.3s 三次贝塞尔曲线（0.19, 1, 0.22, 1）；  
 } .nav-container--top-first {  
 位置：固定；  
 顶部：75px；  
 过渡：所有 0.3s 三次贝塞尔曲线（0.19, 1, 0.22, 1）；  
 } .nav-container--top-second {  
 位置：固定；  
 顶部：0；  
 }  
 .导航标签{  
 显示：弯曲；  
 证明内容：中心；  
 对齐项目：居中；  
 弹性：1；  
 颜色：#03dac6；  
 字母间距：0.1rem；  
 过渡：所有0.5s缓和；  
 字体大小：2vw；  
 } .导航选项卡：悬停{  
 颜色：#1e1f26；  
 背景：#03dac6；  
 过渡：所有0.5s缓和；  
 } .nav-tab-slider {  
 位置：绝对；  
 底部：0；  
 宽度：0；  
 高度：2px；  
 背景：#03dac6；  
 过渡：左 0.3s 缓动；  
 }  
 。背景 {  
 位置：绝对；  
 高度：90vh；  
 顶部：0；  
 底部：0；  
 左：0；  
 右：0；  
 z-index：自动；  
 }  
 @media（最小宽度：800px）{  
 .nav h1,  
 .滑块 h1 {  
 字体大小：5vw；  
 } .nav h2,  
 .滑块 h2 {  
 字体大小：3vw；  
 } .导航标签{  
 字体大小：3vw；  
 }  
 } @media 仅屏幕（最小宽度：360px）{  
 .nav h1,  
 .滑块 h1 {  
 字体大小：8vw；  
 } .nav h2,  
 .滑块 h2 {  
 字体大小：2vw；  
 字母间距：0.2vw；  
 } .导航标签{  
 字体大小：1.2vw；  
 }  
 }  
 。背景 {  
 位置：绝对；  
 高度：100vh；  
 顶部：0；  
 底部：0；  
 左：0；  
 右：0；  
 z-index：0；  
 }  
 .loader 跨度 {  
 颜色：#faebd7；  
 文字阴影：0 0 0 #faebd7;  
 -webkit-animation：加载 1s 缓进出无限交替；  
 } @-webkit-keyframes 加载 {  
 至 {  
 文字阴影：20px 0 70px #ff0266;  
 颜色：#ff0266；  
 }  
 }  
 .loader 跨度：nth-​​child(2) {  
 -webkit-动画延迟：0.1s；  
 }  
 .loader 跨度：nth-​​child(3) {  
 -webkit-动画延迟：0.2s；  
 }  
 .loader 跨度：nth-​​child(4) {  
 -webkit-动画延迟：0.3s；  
 }  
 .loader 跨度：nth-​​child(5) {  
 -webkit-动画延迟：0.4s；  
 }  
 .loader 跨度：nth-​​child(6) {  
 -webkit-动画延迟：0.5s；  
 }  
 .loader 跨度：nth-​​child(7) {  
 -webkit-动画延迟：0.6s；  
 }  
 .loader 跨度：nth-​​child(8) {  
 -webkit-动画延迟：0.7s；  
 }  
 .loader 跨度：nth-​​child(9) {  
 -webkit-动画延迟：0.8s；  
 } .loader 跨度：nth-​​child(10) {  
 -webkit-动画延迟：0.9s；  
 }  
 .loader跨度：第n个孩子（11）{  
 -webkit-动画延迟：1s；  
 }  
 .loader 跨度：nth-​​child(12) {  
 -webkit-动画延迟：1.1s；  
 }  
 .loader 跨度：nth-​​child(13) {  
 -webkit-动画延迟：1.2s；  
 }  
 .loader 跨度：nth-​​child(14) {  
 -webkit-动画延迟：1.3s；  
 }  
 .loader跨度：第n个孩子（15）{  
 -webkit-动画延迟：1.4s；  
 }  
 .loader跨度：第n个孩子（16）{  
 -webkit-动画延迟：1.5s；  
 }  
 .loader跨度：第n个孩子（17）{  
 -webkit-动画延迟：1.6s；  
 }  
 .loader span:nth-child(18) {  
 -webkit 动画延迟：1.7 秒；  
 }  
 .loader 跨度：nth-​​child(19) {  
 -webkit-动画延迟：1.8s；  
 }  
 .loader 跨度：nth-​​child(20) {  
 -webkit-动画延迟：1.9s；  
 }  
 .loader 跨度：nth-​​child(21) {  
 -webkit-动画延迟：2s；  
 }  
 .loader跨度：第n个孩子（22）{  
 -webkit-动画延迟：2.1s；  
 }

JavaScript：

 /* 致谢：  
 矩阵 - Particles.js；  
 SliderJS-Ettrics；  
 设计 - Sara Mazal Web；  
 字体 - 谷歌字体  
 */ window.onload = 函数（）{  
 粒子.init({  
 选择器：“.background”  
 });  
 };  
 常量粒子 = Particles.init({  
 选择器：“.background”，  
 颜色：[“#03dac6”，“#ff0266”，“#000000”]，  
 连接粒子：真，  
 响应：[  
 {  
 断点：768，  
 选项： {  
 颜色：[“#faebd7”，“#03dac6”，“#ff0266”]，  
 最大粒子数：43，  
 连接粒子：假  
 }  
 }  
 ]  
 }); 类导航页{  
 构造函数（）{  
 this.currentId = null;  
 this.currentTab = null;  
 this.tabContainerHeight = 70;  
 this.lastScroll = 0;  
 让自我=这个；  
 $(".nav-tab").click(function () {  
 self.onTabClick(事件, $(this));  
 });  
 $(window).scroll(() => {  
 this.onScroll();  
 });  
 $(window).resize(() => {  
 this.onResize();  
 });  
 } onTabClick（事件，元素）{  
 event.preventDefault();  
 让滚动顶部 =  
 $(element.attr("href")).offset().top - this.tabContainerHeight + 1;  
 $("html, body").animate({ scrollTop: scrollTop }, 600);  
 } onScroll() {  
 this.checkHeaderPosition();  
 this.findCurrentTabSelector();  
 this.lastScroll = $(window).scrollTop();  
 } onResize() {  
 如果（this.currentId）{  
 this.setSliderCss();  
 }  
 } checkHeaderPosition() {  
 常量 headerHeight = 75;  
 if ($(window).scrollTop() > headerHeight) {  
 $(".nav-container").addClass("nav-container--scrolled");  
 } 别的 {  
 $(".nav-container").removeClass("nav-container--scrolled");  
 }  
 让偏移量=  
 $(".nav").offset().top +  
 $(".nav").height() -  
 this.tabContainerHeight -  
 标头高度；  
 如果 （  
 $(window).scrollTop() > this.lastScroll &&  
 $(window).scrollTop() > 偏移量  
 ) {  
 $(".nav-container").addClass("nav-container--move-up");  
 $(".nav-container").removeClass("nav-container--top-first");  
 $(".nav-container").addClass("nav-container--top-second");  
 } 否则如果 (  
 $(window).scrollTop() < this.lastScroll &&  
 $(window).scrollTop() > 偏移量  
 ) {  
 $(".nav-container").removeClass("nav-container--move-up");  
 $(".nav-container").removeClass("nav-container--top-second");  
 $(".nav-container-container").addClass("nav-container--top-first");  
 } 别的 {  
 $(".nav-container").removeClass("nav-container--move-up");  
 $(".nav-container").removeClass("nav-container--top-first");  
 $(".nav-container").removeClass("nav-container--top-second");  
 }  
 } findCurrentTabSelector(元素) {  
 让 newCurrentId;  
 让 newCurrentTab;  
 让自我=这个；  
 $(".nav-tab").each(function () {  
 让 id = $(this).attr("href");  
 让 offsetTop = $(id).offset().top - self.tabContainerHeight;  
 让 offsetBottom =  
 $(id).offset().top + $(id).height() - self.tabContainerHeight;  
 如果 （  
 $(window).scrollTop() > offsetTop &&  
 $(window).scrollTop() < offsetBottom  
 ) {  
 newCurrentId = id;  
 newCurrentTab = $(this);  
 }  
 });  
 if (this.currentId != newCurrentId || this.currentId === null) {  
 this.currentId = newCurrentId;  
 this.currentTab = newCurrentTab;  
 this.setSliderCss();  
 }  
 } setSliderCss() {  
 让宽度 = 0;  
 让左= 0；  
 如果（this.currentTab）{  
 宽度 = this.currentTab.css("宽度");  
 左 = this.currentTab.offset().left;  
 }  
 $(".nav-tab-slider").css("width", width);  
 $(".nav-tab-slider").css("left", left);  
 }  
 } 新的导航页（）；  
 /* 致谢：  
 矩阵 - Particles.js；  
 SliderJS-Ettrics；  
 设计 - Sara Mazal Web；  
 字体 - 谷歌字体  
 */

HTML、CSS 和 JavaScript 代码片段开启， AllWebCodes.com

完毕！享受 导航页面设计/课程片段

现在下载

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/17486/20190600