편집 요약 없음 |
편집 요약 없음 |
||
| 16번째 줄: | 16번째 줄: | ||
a:active { | a:active { | ||
position: relative; | position: relative; | ||
z-index: 1; | |||
} | } | ||
a:active:after { | a:active:after { | ||
2023년 6월 10일 (토) 22:29 판
@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: 1;
}
a:active:after {
animation-name: btn-background;
animation-duration: .5s;
animation-iteration-count: 1;
animation-timing-function: steps(1, end);
animation-fill-mode: forwards;
z-index: -1;
position: absolute;
background: blue;
opacity: 0;
}
}
@keyframes btn-background {
from {
opacity: .2;
}
to {
opacity: 0;
}
}
@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;
}