CSS3는 원형 회전 카운트다운 코드 공유를 실현합니다.

질문 답변을 위한 많은 H5 인터페이스에는 아래 그림과 유사하게 계속 회전하고 감소하는 애니메이션인 회전 카운트다운 효과가 있습니다. 이 글은 순환 회전 카운트다운 기능을 구현하기 위해 주로 CSS3를 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

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

CodePen에서 Stoneniqiu(@stoneniqiu)님의 펜 원 회전을 확인하세요.

반원이 똑바로 서도록 초기 회전은 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)의 펜 서클 타이머를 확인하세요.

 @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입니다. 이것이 회전 카운트다운의 효과입니다. 마지막으로 왼쪽 절반 링의 왼쪽 테두리 색상을 수정하여 마지막 몇 초 동안의 긴급 상황을 강조할 수 있습니다.

관련 추천:

카운트다운 효과 코드 공유를 얻기 위한 WeChat 애플릿 확인 코드

캔버스 화려한 카운트다운 구현 코드 공유

jquery 카운트다운 애플릿 구현 코드

위 내용은 CSS3는 원형 회전 카운트다운 코드 공유를 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!