@ -1,73 +1,3 @@ | |||
# ---> JetBrains | |||
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider | |||
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 | |||
# User-specific stuff | |||
.idea/**/workspace.xml | |||
.idea/**/tasks.xml | |||
.idea/**/usage.statistics.xml | |||
.idea/**/dictionaries | |||
.idea/**/shelf | |||
# Generated files | |||
.idea/**/contentModel.xml | |||
# Sensitive or high-churn files | |||
.idea/**/dataSources/ | |||
.idea/**/dataSources.ids | |||
.idea/**/dataSources.local.xml | |||
.idea/**/sqlDataSources.xml | |||
.idea/**/dynamic.xml | |||
.idea/**/uiDesigner.xml | |||
.idea/**/dbnavigator.xml | |||
# Gradle | |||
.idea/**/gradle.xml | |||
.idea/**/libraries | |||
# Gradle and Maven with auto-import | |||
# When using Gradle or Maven with auto-import, you should exclude module files, | |||
# since they will be recreated, and may cause churn. Uncomment if using | |||
# auto-import. | |||
# .idea/artifacts | |||
# .idea/compiler.xml | |||
# .idea/jarRepositories.xml | |||
# .idea/modules.xml | |||
# .idea/*.iml | |||
# .idea/modules | |||
# *.iml | |||
# *.ipr | |||
# CMake | |||
cmake-build-*/ | |||
# Mongo Explorer plugin | |||
.idea/**/mongoSettings.xml | |||
# File-based project format | |||
*.iws | |||
# IntelliJ | |||
out/ | |||
# mpeltonen/sbt-idea plugin | |||
.idea_modules/ | |||
# JIRA plugin | |||
atlassian-ide-plugin.xml | |||
# Cursive Clojure plugin | |||
.idea/replstate.xml | |||
# Crashlytics plugin (for Android Studio and IntelliJ) | |||
com_crashlytics_export_strings.xml | |||
crashlytics.properties | |||
crashlytics-build.properties | |||
fabric.properties | |||
# Editor-based Rest Client | |||
.idea/httpRequests | |||
# Android studio 3.1+ serialized cache file | |||
.idea/caches/build_file_checksums.ser | |||
/.idea/ |
@ -0,0 +1,54 @@ | |||
<!DOCTYPE html> | |||
<html lang="en"> | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Title</title> | |||
<link rel="stylesheet" href="src/root.css"> | |||
<link rel="stylesheet" href="src/pace.css"> | |||
<link rel="stylesheet" href="src/preloader.css"> | |||
<link rel="stylesheet" href="src/loading.css"> | |||
<link rel="stylesheet" href="src/index.css"> | |||
</head> | |||
<body> | |||
<!-- LOGO --> | |||
<div class="loading"> | |||
<span>网</span> | |||
<span>塔</span> | |||
<span>科</span> | |||
<span>技</span> | |||
</div> | |||
<!-- 屏幕 --> | |||
<div id="preloader"></div> | |||
<script src="src/jquery-3.6.0.js"></script> | |||
<!-- 处理JQ3.0版本兼容 --> | |||
<script src="src/jquery-migrate-3.4.0.min.js"></script> | |||
<!-- 页面加载进度 --> | |||
<script src="src/pace.min.js"></script> | |||
<script> | |||
// 延时看效果 time = ?秒 | |||
$.get("http://wtkj.qiyejianzhan.wang/dtest.php?time=3", function (data, status) { | |||
console.log(data); | |||
}); | |||
// 页面加载进度条配置 | |||
paceOptions = { | |||
ajax: true, | |||
document: true, | |||
eventLag: false | |||
}; | |||
// 网页加载结束后执行 | |||
Pace.on('done', function () { | |||
$('#preloader').addClass("isdone"); | |||
$('.loading').addClass("isdone"); | |||
}); | |||
</script> | |||
</body> | |||
</html> |
@ -0,0 +1,3 @@ | |||
body { | |||
background-color: goldenrod; | |||
} |
@ -0,0 +1,83 @@ | |||
.loading { | |||
position: fixed; | |||
left: 50%; | |||
top: calc(50% - 40px); | |||
-webkit-transform: translateX(-50%) translateY(-50%); | |||
-ms-transform: translateX(-50%) translateY(-50%); | |||
transform: translateX(-50%) translateY(-50%); | |||
font-weight: 300; | |||
font-size: 16px; | |||
text-transform: uppercase; | |||
letter-spacing: 10px; | |||
z-index: 9999999999; | |||
color: #ffffff; | |||
} | |||
.loading.isdone { | |||
top: 50%; | |||
opacity: 0; | |||
-webkit-transition: all .8s; | |||
-o-transition: all .8s; | |||
transition: all .8s; | |||
-webkit-transition-delay: .5s; | |||
-o-transition-delay: .5s; | |||
transition-delay: .5s; | |||
} | |||
.loading span { | |||
-webkit-animation: loading 1.4s infinite alternate; | |||
animation: loading 1.4s infinite alternate; | |||
} | |||
.loading span:nth-child(1) { | |||
-webkit-animation-delay: 0s; | |||
animation-delay: 0s; | |||
} | |||
.loading span:nth-child(2) { | |||
-webkit-animation-delay: 0.1s; | |||
animation-delay: 0.1s; | |||
} | |||
.loading span:nth-child(3) { | |||
-webkit-animation-delay: 0.2s; | |||
animation-delay: 0.2s; | |||
} | |||
.loading span:nth-child(4) { | |||
-webkit-animation-delay: 0.3s; | |||
animation-delay: 0.3s; | |||
} | |||
.loading span:nth-child(5) { | |||
-webkit-animation-delay: 0.4s; | |||
animation-delay: 0.4s; | |||
} | |||
.loading span:nth-child(6) { | |||
-webkit-animation-delay: 0.5s; | |||
animation-delay: 0.5s; | |||
} | |||
.loading span:nth-child(7) { | |||
-webkit-animation-delay: 0.6s; | |||
animation-delay: 0.6s; | |||
} | |||
@-webkit-keyframes loading { | |||
0% { | |||
opacity: 1; | |||
} | |||
100% { | |||
opacity: 0; | |||
} | |||
} | |||
@keyframes loading { | |||
0% { | |||
opacity: 1; | |||
} | |||
100% { | |||
opacity: 0; | |||
} | |||
} |
@ -0,0 +1,78 @@ | |||
/*! | |||
* pace.js v1.2.4 | Default theme | |||
* https://github.com/CodeByZach/pace/ | |||
* Licensed MIT © HubSpot, Inc. | |||
*/ | |||
.pace { | |||
-webkit-pointer-events: none; | |||
pointer-events: none; | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
user-select: none | |||
} | |||
.pace-inactive { | |||
/*display: none*/ | |||
} | |||
.pace .pace-progress { | |||
background: #d72630; | |||
position: fixed; | |||
z-index: 2000; | |||
top: 0; | |||
right: 100%; | |||
width: 100%; | |||
height: 2px | |||
} | |||
.pace { | |||
pointer-events: none; | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
-ms-user-select: none; | |||
user-select: none; | |||
z-index: 99999999999999; | |||
position: fixed; | |||
margin: auto; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
width: 400px; | |||
border: 0; | |||
height: 1px; | |||
overflow: hidden; | |||
background: rgba(255, 255, 255, 0.05); | |||
-webkit-transition: all 1s; | |||
-o-transition: all 1s; | |||
transition: all 1s; | |||
} | |||
/** 修改进度条的颜色 */ | |||
.pace .pace-progress { | |||
-webkit-transform: translate3d(0, 0, 0); | |||
transform: translate3d(0, 0, 0); | |||
max-width: 300px; | |||
/*position: fixed;*/ | |||
z-index: 99999999999999; | |||
display: block; | |||
position: absolute; | |||
top: 0; | |||
right: 100%; | |||
height: 100%; | |||
width: 100%; | |||
background: #12c2e9; | |||
background: -webkit-gradient(linear, left top, right top, from(#12c2e9), color-stop(#c471ed), to(#f64f59)); | |||
background: -webkit-linear-gradient(left, #12c2e9, #c471ed, #f64f59); | |||
background: -o-linear-gradient(left, #12c2e9, #c471ed, #f64f59); | |||
background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59); | |||
} | |||
.pace.pace-inactive { | |||
width: 100vw; | |||
opacity: 0; | |||
} | |||
.pace.pace-inactive .pace-progress { | |||
max-width: 100vw; | |||
} |
@ -0,0 +1,44 @@ | |||
#preloader { | |||
width: 100%; | |||
height: 100vh; | |||
overflow: hidden; | |||
position: fixed; | |||
z-index: 9999999; | |||
} | |||
#preloader:after, #preloader:before { | |||
content: ''; | |||
position: fixed; | |||
left: 0; | |||
height: 50%; | |||
width: 100%; | |||
background: #252531; | |||
-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); | |||
-o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); | |||
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); | |||
} | |||
#preloader:before { | |||
top: 0; | |||
} | |||
#preloader:after { | |||
bottom: 0; | |||
} | |||
#preloader.isdone { | |||
visibility: hidden; | |||
-webkit-transition-delay: 1.5s; | |||
-o-transition-delay: 1.5s; | |||
transition-delay: 1.5s; | |||
} | |||
#preloader.isdone:after, #preloader.isdone:before { | |||
height: 0; | |||
-webkit-transition: all 0.7s cubic-bezier(1, 0, 0.55, 1); | |||
-o-transition: all 0.7s cubic-bezier(1, 0, 0.55, 1); | |||
transition: all 0.7s cubic-bezier(1, 0, 0.55, 1); | |||
-webkit-transition-delay: 1s; | |||
-o-transition-delay: 1s; | |||
transition-delay: 1s; | |||
} |
@ -0,0 +1,342 @@ | |||
/** | |||
* 1. 更正所有浏览器中的行高。 | |||
* 2. 防止在 iOS 中方向更改后调整字体大小。 | |||
*/ | |||
html { | |||
line-height: 1.15; /* 1 */ | |||
-webkit-text-size-adjust: 100%; /* 2 */ | |||
} | |||
/* 部分 | |||
========================================================================== */ | |||
/** | |||
* 删除所有浏览器中的边距 | |||
*/ | |||
body { | |||
margin: 0; | |||
} | |||
/** | |||
* 在 IE 中一致地渲染 `main` 元素。 | |||
*/ | |||
main { | |||
display: block; | |||
} | |||
/** | |||
* 更正 Chrome、Firefox 和 Safari 中 `section` 和 `article` 上下文中 `h1` 元素的字体大小和边距。 | |||
*/ | |||
h1 { | |||
font-size: 2em; | |||
margin: 0.67em 0; | |||
} | |||
/* 分组内容 | |||
========================================================================== */ | |||
/** | |||
* 1. 在 Firefox 中添加正确的框大小。 | |||
* 2. 在 Edge 和 IE 中显示溢出。 | |||
*/ | |||
hr { | |||
box-sizing: content-box; /* 1 */ | |||
height: 0; /* 1 */ | |||
overflow: visible; /* 2 */ | |||
} | |||
/** | |||
* 1. 更正所有浏览器中字体大小的继承和缩放。 | |||
* 2. 更正所有浏览器中奇怪的“em”字体大小。 | |||
*/ | |||
pre { | |||
font-family: monospace, monospace; /* 1 */ | |||
font-size: 1em; /* 2 */ | |||
} | |||
/* 文本级语义 | |||
========================================================================== */ | |||
/** | |||
* 删除 IE 10 中活动链接的灰色背景。 | |||
*/ | |||
a { | |||
background-color: transparent; | |||
} | |||
/** | |||
* 1. 删除 Chrome 57 中的底部边框- | |||
* 2. 在 Chrome、Edge、IE、Opera 和 Safari 中添加正确的文本装饰。 | |||
*/ | |||
abbr[title] { | |||
border-bottom: none; /* 1 */ | |||
text-decoration: underline; /* 2 */ | |||
text-decoration: underline dotted; /* 2 */ | |||
} | |||
/** | |||
* 在 Chrome、Edge 和 Safari 中添加正确的字体粗细。 | |||
*/ | |||
b, | |||
strong { | |||
font-weight: bolder; | |||
} | |||
/** | |||
* 1. 更正所有浏览器中字体大小的继承和缩放。 | |||
* 2. 更正所有浏览器中奇怪的“em”字体大小。 | |||
*/ | |||
code, | |||
kbd, | |||
samp { | |||
font-family: monospace, monospace; /* 1 */ | |||
font-size: 1em; /* 2 */ | |||
} | |||
/** | |||
* 在所有浏览器中添加正确的字体大小。 | |||
*/ | |||
small { | |||
font-size: 80%; | |||
} | |||
/** | |||
* 防止 `sub` 和 `sup` 元素影响行高 所有浏览器。 | |||
*/ | |||
sub, | |||
sup { | |||
font-size: 75%; | |||
line-height: 0; | |||
position: relative; | |||
vertical-align: baseline; | |||
} | |||
sub { | |||
bottom: -0.25em; | |||
} | |||
sup { | |||
top: -0.5em; | |||
} | |||
/* 嵌入内容 | |||
========================================================================== */ | |||
/** | |||
* 删除 IE 10 中链接内图像的边框。 | |||
*/ | |||
img { | |||
border-style: none; | |||
} | |||
/* Forms | |||
========================================================================== */ | |||
/** | |||
* 1. 更改所有浏览器中的字体样式。 | |||
* 2. 在 Firefox 和 Safari 中删除边距。 | |||
*/ | |||
button, | |||
input, | |||
optgroup, | |||
select, | |||
textarea { | |||
font-family: inherit; /* 1 */ | |||
font-size: 100%; /* 1 */ | |||
line-height: 1.15; /* 1 */ | |||
margin: 0; /* 2 */ | |||
} | |||
/** | |||
* 在 IE 中显示溢出。 | |||
* 1. 在 Edge 中显示溢出。 | |||
*/ | |||
button, | |||
input { /* 1 */ | |||
overflow: visible; | |||
} | |||
/** | |||
* 删除 Edge、Firefox 和 IE 中文本转换的继承。 | |||
* 1. 移除 Firefox 中文本转换的继承。 | |||
*/ | |||
button, | |||
select { /* 1 */ | |||
text-transform: none; | |||
} | |||
/** | |||
* 更正 iOS 和 Safari 中无法设置可点击类型的样式。 | |||
*/ | |||
button, | |||
[type="button"], | |||
[type="reset"], | |||
[type="submit"] { | |||
-webkit-appearance: button; | |||
} | |||
/** | |||
* 移除 Firefox 中的内边框和内边距。 | |||
*/ | |||
button::-moz-focus-inner, | |||
[type="button"]::-moz-focus-inner, | |||
[type="reset"]::-moz-focus-inner, | |||
[type="submit"]::-moz-focus-inner { | |||
border-style: none; | |||
padding: 0; | |||
} | |||
/** | |||
* 恢复上一条规则未设置的焦点样式。 | |||
*/ | |||
button:-moz-focusring, | |||
[type="button"]:-moz-focusring, | |||
[type="reset"]:-moz-focusring, | |||
[type="submit"]:-moz-focusring { | |||
outline: 1px dotted ButtonText; | |||
} | |||
/** | |||
* 更正 Firefox 中的填充。 | |||
*/ | |||
fieldset { | |||
padding: 0.35em 0.75em 0.625em; | |||
} | |||
/** | |||
* 1. 更正 Edge 和 IE 中的文本换行。 | |||
* 2. 更正 IE 中 `fieldset` 元素的颜色继承。 | |||
* 3. 删除填充,这样开发人员在归零时不会被抓到 | |||
* 所有浏览器中的 `fieldset` 元素。 | |||
*/ | |||
legend { | |||
box-sizing: border-box; /* 1 */ | |||
color: inherit; /* 2 */ | |||
display: table; /* 1 */ | |||
max-width: 100%; /* 1 */ | |||
padding: 0; /* 3 */ | |||
white-space: normal; /* 1 */ | |||
} | |||
/** | |||
* 在 Chrome、Firefox 和 Opera 中添加正确的垂直对齐方式。 | |||
*/ | |||
progress { | |||
vertical-align: baseline; | |||
} | |||
/** | |||
* 删除 IE 10+ 中的默认垂直滚动条。 | |||
*/ | |||
textarea { | |||
overflow: auto; | |||
} | |||
/** | |||
* 1. 在 IE 10 中添加正确的框大小。 | |||
* 2. 删除 IE 10 中的填充。 | |||
*/ | |||
[type="checkbox"], | |||
[type="radio"] { | |||
box-sizing: border-box; /* 1 */ | |||
padding: 0; /* 2 */ | |||
} | |||
/** | |||
* 更正 Chrome 中递增和递减按钮的光标样式。 | |||
*/ | |||
[type="number"]::-webkit-inner-spin-button, | |||
[type="number"]::-webkit-outer-spin-button { | |||
height: auto; | |||
} | |||
/** | |||
* 1. 更正 Chrome 和 Safari 中的奇怪外观。 | |||
* 2. 更正 Safari 中的轮廓样式。 | |||
*/ | |||
[type="search"] { | |||
-webkit-appearance: textfield; /* 1 */ | |||
outline-offset: -2px; /* 2 */ | |||
} | |||
/** | |||
* 在 macOS 上删除 Chrome 和 Safari 中的内部填充。 | |||
*/ | |||
[type="search"]::-webkit-search-decoration { | |||
-webkit-appearance: none; | |||
} | |||
/** | |||
* 1. 更正 iOS 和 Safari 中无法设置可点击类型的样式。 | |||
* 2. 在 Safari 中将字体属性更改为“继承”。 | |||
*/ | |||
::-webkit-file-upload-button { | |||
-webkit-appearance: button; /* 1 */ | |||
font: inherit; /* 2 */ | |||
} | |||
/* 交互的 | |||
========================================================================== */ | |||
/* | |||
* 在 Edge、IE 10+ 和 Firefox 中添加正确的显示。 | |||
*/ | |||
details { | |||
display: block; | |||
} | |||
/* | |||
* 在所有浏览器中添加正确的显示。 | |||
*/ | |||
summary { | |||
display: list-item; | |||
} | |||
/* 杂项 | |||
========================================================================== */ | |||
/** | |||
* 在 IE 10+ 中添加正确的显示。 | |||
*/ | |||
template { | |||
display: none; | |||
} | |||
/** | |||
* 在 IE 10 中添加正确的显示。 | |||
*/ | |||
[hidden] { | |||
display: none; | |||
} |