편집 요약 없음 |
편집 요약 없음 |
||
| 16번째 줄: | 16번째 줄: | ||
a:active { | a:active { | ||
position: relative; | position: relative; | ||
z-index: | z-index: 9999; | ||
} | } | ||
a:active::before { | a:active::before { | ||
| 28번째 줄: | 28번째 줄: | ||
@keyframes btn-background { | @keyframes btn-background { | ||
from { | from { | ||
z-index: | z-index: 9998; | ||
position: absolute; | position: absolute; | ||
background: blue; | background: blue; | ||
| 34번째 줄: | 34번째 줄: | ||
} | } | ||
to { | to { | ||
z-index: | z-index: 9998; | ||
position: absolute; | position: absolute; | ||
background: none; | background: none; | ||
2023년 6월 10일 (토) 22:31 판
@media screen and (max-width: 768px) {
.namucat-main-box {
margin-bottom: .6rem;
border: 1px solid #ccc;
border-radius: 4px;
padding: 3px 3px 3px 5px;
}
.namucat-no-box {
margin-bottom: .6rem;
border: 1px solid #bcdff1;
padding: 10px;
background: #d9edf7;
border-radius: 5px;
color: #31708f;
}
a:active {
position: relative;
z-index: 9999;
}
a:active::before {
animation-name: btn-background;
animation-duration: .5s;
animation-iteration-count: 1;
animation-timing-function: steps(1, end);
animation-fill-mode: forwards;
}
}
@keyframes btn-background {
from {
z-index: 9998;
position: absolute;
background: blue;
background: rgba(0, 0, 255, .5);
}
to {
z-index: 9998;
position: absolute;
background: none;
}
}
@media screen and (min-width: 768px) {
.namucat-main-box {
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
padding: 3px 3px 3px 5px;
}
.namucat-no-box {
margin-bottom: 1rem;
border: 1px solid #bcdff1;
padding: 10px;
background: #d9edf7;
border-radius: 5px;
color: #31708f;
}
}
.namucat-blur {
filter: blur(3px);
}
.namucat-blur:hover {
filter: none;
}
.namucat-stick:after {
content: '|';
padding: 0 5px;
user-select: none;
}