其他分享
首页 > 其他分享> > 导航页面设计/课程

导航页面设计/课程

作者:互联网

导航页面设计/课程

导航页面设计/课程免费下载 在 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

标签:container,跨度,loader,课程,nav,tab,webkit,导航,页面
来源: https://www.cnblogs.com/amboke/p/16660219.html