mirror of
https://github.com/next-theme/hexo-theme-next.git
synced 2026-01-17 18:22:33 +00:00
Optimize sidebar-dimmer & search-popup animation
This commit is contained in:
parent
b2ae986c0b
commit
8a5643b220
@ -17,7 +17,6 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
content: ' ';
|
content: ' ';
|
||||||
height: 10px;
|
height: 10px;
|
||||||
left: 0;
|
|
||||||
margin-left: -6px;
|
margin-left: -6px;
|
||||||
margin-top: -4px;
|
margin-top: -4px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -37,7 +36,6 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
content: ' ';
|
content: ' ';
|
||||||
height: 8px;
|
height: 8px;
|
||||||
left: 0;
|
|
||||||
margin-left: -4px;
|
margin-left: -4px;
|
||||||
margin-top: -4px;
|
margin-top: -4px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -69,8 +67,7 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
content: ' ';
|
content: ' ';
|
||||||
height: 6px;
|
height: 6px;
|
||||||
left: 0;
|
left: -4px;
|
||||||
margin-left: -4px;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: $font-size-smallest;
|
top: $font-size-smallest;
|
||||||
transition: background $transition-ease;
|
transition: background $transition-ease;
|
||||||
@ -110,7 +107,6 @@
|
|||||||
background: $whitesmoke;
|
background: $whitesmoke;
|
||||||
content: ' ';
|
content: ' ';
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
|
||||||
margin-left: -2px;
|
margin-left: -2px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1.25em;
|
top: 1.25em;
|
||||||
|
|||||||
@ -42,17 +42,14 @@
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
content: '';
|
content: '';
|
||||||
height: 2px;
|
height: 2px;
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform: scaleX(0);
|
transform: scaleX(0);
|
||||||
transition: transform $transition-ease;
|
transition: transform $transition-ease;
|
||||||
visibility: hidden;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover::before {
|
&:hover::before {
|
||||||
transform: scaleX(1);
|
transform: scaleX(1);
|
||||||
visibility: visible;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fa-external-link-alt {
|
.fa-external-link-alt {
|
||||||
|
|||||||
@ -9,14 +9,13 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
transition: visibility 0s linear .2s, background .2s;
|
transition: visibility .4s, background .4s;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: $zindex-4;
|
z-index: $zindex-4;
|
||||||
|
|
||||||
.search-active & {
|
.search-active & {
|
||||||
background: rgba(0, 0, 0, .3);
|
background: rgba(0, 0, 0, .3);
|
||||||
transition: background .2s;
|
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -27,7 +26,7 @@
|
|||||||
height: 80%;
|
height: 80%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
transition: transform .2s;
|
transition: transform .4s;
|
||||||
width: 700px;
|
width: 700px;
|
||||||
|
|
||||||
.search-active & {
|
.search-active & {
|
||||||
|
|||||||
@ -19,7 +19,7 @@
|
|||||||
main-container();
|
main-container();
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes iconAnimate {
|
@keyframes icon-animate {
|
||||||
0%, 100% {
|
0%, 100% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
@ -62,7 +62,7 @@
|
|||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
|
|
||||||
if (hexo-config('footer.icon.animated')) {
|
if (hexo-config('footer.icon.animated')) {
|
||||||
animation: iconAnimate 1.33s ease-in-out infinite;
|
animation: icon-animate 1.33s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -7,17 +7,18 @@
|
|||||||
background: black;
|
background: black;
|
||||||
display: block;
|
display: block;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 100%;
|
left: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
transition: visibility .4s, opacity .4s;
|
||||||
|
visibility: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: $zindex-1;
|
z-index: $zindex-1;
|
||||||
|
|
||||||
.sidebar-active & {
|
.sidebar-active & {
|
||||||
opacity: .7;
|
opacity: .7;
|
||||||
transform: translateX(-100%);
|
visibility: visible;
|
||||||
transition: opacity .5s;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user