<p>버튼을 클릭할 때마다 애니메이션을 구현하려고 하는데 데스크톱에서는 잘 작동하지만 모바일에서는 동일한 효과를 얻을 수 없습니다. 먼저 버튼을 클릭한 다음 다른 곳을 클릭하여 CSS의 초점을 맞춘 다음 버튼을 다시 클릭하여 애니메이션 효과를 얻어야 합니다. </p> <p>다음은 코드 조각입니다. </p> <p> <pre class="brush:css;toolbar:false;">.btn_container { 색상: #35f8ff; 위치: 상대; 디스플레이: 인라인 블록; 텍스트 정렬: 중앙; 여백: 2.5rem 자동; } .prog_btn { 텍스트 변환: 대문자; 글꼴 크기: 1.3rem; 패딩: 10px 25px; Z-인덱스: 3; 배경색: 투명; 커서: 포인터; 전환: 0.2초 완화; 위치: 상대; 여백: 자동; } .btn_container .svgStroke { 위치: 절대; Z-색인: 1; 너비: 100%; 최고: -25%; 왼쪽: 0; } .btn_container .svgStroke 경로 { 스트로크-다샤레이: 100; 스트로크 대시 오프셋: -800; 획 너비: 2; 전환: 모두 1로 되어 있는 easy-in-out; 스트로크: #35f8ff; } @keyframes 대시 { 0% { 스트로크-다샤레이: 100; 획 너비: 2; } 50% { 획 너비: 4; 스트로크: #35f8ff; 필터: 드롭 섀도우(0px 0px 3px #e8615a) 드롭 섀도우(0px 0px 20px #35f8ff) 드롭 섀도우(0px 0px 150px #35f8ff); } 100% { 획-대시 오프셋: 800; 획 너비: 2; } } .prog_btn:hover+.svgStroke 경로 { 커서: 포인터; 애니메이션: 대시 1.5초 큐빅-베지어(0.25, 0.46, 0.45, 0.94); } .prog_btn:호버 { 글꼴 크기: 1.2rem; } .추가하다 { 디스플레이: 인라인 블록; 오른쪽 여백: 0.75rem; 높이: 1.5rem; 폭: 1.5rem; }</pre> <pre class="brush:html;toolbar:false;"><div class="btn_container"> <div class="prog_btn"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" 스트로크-폭="1.5" 스트로크="currentColor" 클래스="추가" > <경로 스트로크-라인캡="라운드" 스트로크 라인 조인="라운드" d="M12 4.5v15m7.5-7.5h-15" ></경로> </svg> 10% 추가 </div> <svg class="svgStroke" width="222" height="65" viewBox="0 0 222 85" fill="none" xmlns="http://www.w3.org/2000/svg"> <경로 d="M205 84H21L1 63.4941V18.5765L21 1H205L221 18.5765V63.4941L205 84Z" 스트로크="흰색" 획-너비="2" ></경로> </svg>