녹색으로 바뀌었다가 원래 색상으로 돌아갔다가 다시 녹색으로 바뀌는 버튼의 예가 포함 된 내 장치에서 화면을 녹화 한 비디오 파일을 살펴보십시오.이 모든 것은 한 번의 클릭만으로 가능합니다.
https://drive.google.com/file/d/10TjrLJeYM3vdm6EWcgpUQLco_8QzydK_/view?usp=sharing (재생 버튼을 클릭해도 재생되지 않으면 동영상을 다운로드 해주세요. 500KB 미만입니다.)
이걸 어떻게 달성합니까? 내가 가진 건 이것뿐입니다. 그리고 저는 그런 종류의 애니메이션을 얻기 위해 다음에 무엇을 해야할지 모르겠습니다. 도와주세요.
.query__choice {
height: 2rem;
margin: 0.3rem 0.75rem;
border-radius: 5px;
font-size: 1em;
border: 1px solid lightgrey;
color: black;
}
.query__choice:hover {
font-weight: bold;
border: 2px solid lightgrey;
color: black;
}
.query__choice:active {
text-decoration: none;
color: black;
border: 2px solid rgb(57, 235, 57);
background: green;
}<p class="query__choice" id="choice-A"></p>
<p class="query__choice" id="choice-B"></p>
<p class="query__choice" id="choice-C"></p>
<p class="query__choice" id="choice-D"></p>나는 자바 스크립트로 예제를 만들었습니다. 애니메이션을 작성하고 3 회 반복했습니다.
document.querySelectorAll(".query__choice").forEach(p => {
p.addEventListener("click", () => {
p.classList.add("active");
setTimeout(() => {
p.classList.remove("active");
}, (500 * 3))
// 500 * 3 = animation-duration * animation-iteration-count
});
});.query__choice {
height: 2rem;
margin: 0.3rem 0.75rem;
border-radius: 5px;
font-size: 1em;
border: 1px solid lightgrey;
color: black;
}
.query__choice.active {
animation-name: button;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: 3;
}
.query__choice:hover {
font-weight: bold;
border: 2px solid lightgrey;
color: black;
}
.query__choice:active {
text-decoration: none;
color: black;
border: 2px solid rgb(57, 235, 57);
}
@keyframes button {
50% {
background: green;
}
}<p class="query__choice" id="choice-A"></p>
<p class="query__choice" id="choice-B"></p>
<p class="query__choice" id="choice-C"></p>
<p class="query__choice" id="choice-D"></p>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다