html {
scroll-behavior: smooth;
}
#backtotop-btn {
visibility: hidden;
position: fixed;
cursor: pointer;
right: 20px;
bottom: 10px;
user-select: none;
transition: 1s;
z-index:9999999;
}
.back2Top {
display:inline-block;
width: 50px;
height:50px;
padding:5px 0 0 0;
line-height: 50px;
overflow: hidden;
background-color: #313131;
color: #ff9900;
text-align: center;
font-size: 30px;
text-decoration: none;
border-left:3px solid #666666;
border-top:3px solid #666666;
border-right:3px solid #666666;
border-bottom:3px solid #666666;
z-index:9999999;
}
.back2Top:hover {
background-color: #313131;
color: #ff9900;
border-right:3px solid #ffffff;
border-bottom:3px solid #ffffff;
border-left:3px solid #ffffff;
border-top:3px solid #ffffff;
}
.slide-in-bottom {
-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-out-top {
-webkit-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.scale-in-center {
-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.scale-out-center {
-webkit-animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@-webkit-keyframes slide-out-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
}
@keyframes slide-out-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
}
@-webkit-keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes scale-in-center {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes scale-out-center {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
}
@keyframes scale-out-center {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
}