CSS3에서 시계 반대 방향으로 회전하는 카운트다운을 만드는 방법

이번에는 CSS3에서 반시계 방향 회전 카운트다운을 만드는 방법과 CSS3에서 반시계 방향 회전 카운트다운을 하기 위한 주의사항은 무엇인지 보여드리겠습니다.

질문에 답변하기 위한 많은 H5 인터페이스에는 아래 그림과 같이 계속해서 회전하고 감소하는 애니메이션인 회전 카운트다운 효과가 있습니다.

오늘 조사했는데 국경 로테이션을 통해 얻을 수 있어요. 일반적으로 경계를 통해 4분할 원을 얻을 수 있습니다.

CodePen에서 Stoneniqiu(@stoneniqiu)의 Pen Circle-rotate를 참조하세요.

초기 45도 회전은 반원이 똑바로 서도록 하는 것입니다. 그런 다음 180도 회전합니다.

  .rightcircle{
                border-top: .4rem solid #8731fd;
                border-right: .4rem solid #8731fd;
                right: 0;
                transform: rotate(45deg)            }
 .right_cartoon {
                -webkit-animation: circleProgressLoad_right 10s linear infinite forwards;
                animation: circleProgressLoad_right 10s linear infinite forwards;
            }
 @keyframes circleProgressLoad_right {
                0% {
                    -webkit-transform: rotate(46deg);
                    transform: rotate(46deg)                }
                50%,to {
                    -webkit-transform: rotate(-136deg);
                    transform: rotate(-136deg)                }
            }

결국, 한 가지 색상이 지배적이라면 두 개의 반원으로 합쳐질 수 있습니다.

CodePen에서 Stoneniqiu(@stoneniqiu)의 Pen Circle-

time

r을 확인하세요.

 @keyframes circleProgressLoad_left {
                0%,50% {
                    -webkit-transform: rotate(46deg);
                    transform: rotate(46deg)                }
            
                to {
                    -webkit-transform: rotate(-136deg);
                    transform: rotate(-136deg)                }
            }

오른쪽 선이 5초 동안 회전한 후 왼쪽에서 다시 5초 동안 대기하는 것을 확인하세요. 여기의 CSS 애니메이션은 약간 다릅니다. 오른쪽은 0% 시작, 50%, 끝입니다. 왼쪽은 0%, 50%, 그리고 5초 대기를 달성하는 to입니다. 이것이 회전 카운트다운의 효과입니다. 마지막으로 왼쪽 절반 링의 왼쪽 테두리 색상을 수정하여 마지막 몇 초 동안의 긴급 상황을 강조할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

DataTable 플러그인이 비동기 로딩을 구현할 수 있나요?

jQuery가 마스터해야 하는 API

위 내용은 CSS3에서 시계 반대 방향으로 회전하는 카운트다운을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!