애니메이션 소재 디자인 클릭 애니메이션

Question

나는 이들 중 일부의 동작을 시뮬레이션하는 버튼을 만들 필요가 <입력 유형 =이 "제출">. 그러나 여기에는 :before 또는 :after 요소가 없습니다. 어떻게 구현할 것인가?

Answer 1

맞습니다. <input type="submit" />에 사용할 수있는 :before 및 :after과 같은 의사 요소는 없습니다. <button type="submit">이 (가) 당신을 왜 불만스럽게 생각하는 이유는 무엇입니까?

내가 현재 생각할 수있는 유일한 방법은 Javascript를 사용하는 것입니다. 버튼을 클릭하면 새 요소를 만들고 동일한 크기의 버튼을 추가하고 그 위에 요소를 배치 할 수 있습니다. 입력 태그와 동일한 텍스트를 삽입하십시오. 이 새로 생성 된 요소에서 원을 배치하고 애니메이션을 만들 수 있습니다. 애니메이션이 멈 추면 DOM에서 다시 애니메이션을 제거 할 수 있습니다. 내가 의미하는 바를 얻길 바랍니다.

이렇게 작은 일을하기에는 너무 많은 것 같습니다.

// 편집 : 내 제안을 시도하려면 새로운 요소 내부에 복사 된 텍스트가 거품/원 애니메이션 위에 있는지 확인해야합니다.