113 lines
1.7 KiB
CSS
113 lines
1.7 KiB
CSS
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
scroll-behavior: smooth;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 背景 */
|
||
|
|
|
||
|
|
.page-background {
|
||
|
|
z-index: -100;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
background-attachment: fixed;
|
||
|
|
background-image: url(../img/Unsplash_V6TWE6h8gyg_Blur.jpg);
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
}
|
||
|
|
/*
|
||
|
|
.page-background:after {
|
||
|
|
content: "";
|
||
|
|
z-index: -90;
|
||
|
|
position: inherit;
|
||
|
|
top: inherit;
|
||
|
|
left: inherit;
|
||
|
|
width: inherit;
|
||
|
|
height: inherit;
|
||
|
|
background: inherit;
|
||
|
|
filter: blur(4px);
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* 滚动条 */
|
||
|
|
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
height: 8px;
|
||
|
|
width: 8px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background-color: #CCC;
|
||
|
|
border-radius: 0;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb:hover {
|
||
|
|
background-color: #03A9F4;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background-color: #FFF;
|
||
|
|
border-radius: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 选中 */
|
||
|
|
|
||
|
|
::selection {
|
||
|
|
background:#03A9F4;
|
||
|
|
color:#FFF;
|
||
|
|
}
|
||
|
|
::-moz-selection {
|
||
|
|
background:#03A9F4;
|
||
|
|
color:#FFF;
|
||
|
|
}
|
||
|
|
::-webkit-selection {
|
||
|
|
background:#03A9F4;
|
||
|
|
color:#FFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 动画 */
|
||
|
|
|
||
|
|
@keyframes spinner {
|
||
|
|
from {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes FloatingBarSlide {
|
||
|
|
from {
|
||
|
|
bottom: -50px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes ToTopAnimation {
|
||
|
|
0% {
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
right: 2.2rem;
|
||
|
|
bottom: 2.2rem;
|
||
|
|
height: 2.6rem;
|
||
|
|
width: 2.6rem;
|
||
|
|
line-height: 40px;
|
||
|
|
color: #FFF;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
color: #2196F3;
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes ToolPanelShow {
|
||
|
|
from {
|
||
|
|
bottom: -110%;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
bottom: 0;
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|