편집 요약 없음 |
편집 요약 없음 |
||
19번째 줄: | 19번째 줄: | ||
a:active { | a:active { | ||
animation-name: btn-background; | animation-name: btn-background; | ||
animation-duration: | animation-duration: .5s; | ||
animation-iteration-count: 1; | animation-iteration-count: 1; | ||
animation-timing-function: steps(1, end); | animation-timing-function: steps(1, end); |
2023년 6월 7일 (수) 09:39 판
@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 {
transition: background 0s;
}
a:active {
animation-name: btn-background;
animation-duration: .5s;
animation-iteration-count: 1;
animation-timing-function: steps(1, end);
animation-fill-mode: forwards;
background: blue;
background: rgba(0, 0, 255, .1);
}
}
@keyframes btn-background {
from {
background: blue;
background: rgba(0, 0, 255, .1);
}
to {
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;
}