导航页面设计/课程

2022-09-06 00:30:51 阅读：230 来源： 互联网

标签：container 跨度 loader 课程 nav tab webkit 导航页面

导航页面设计/课程

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

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

现在下载

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

导航页面设计/课程

导航页面设计/课程

HTML：

CSS：

JavaScript：