导航页面设计/课程
作者：互联网
导航页面设计/课程
导航页面设计/课程免费下载 在 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