CSS3을 사용하여 링 진행률 표시줄을 만드는 예-CSS 튜토리얼-php.cn

CSS3을 사용하여 링 진행률 표시줄을 만드는 예

高洛峰

풀어 주다： 2017-03-17 11:41:07

원래의

1584명이 탐색했습니다.

이 기사에서는 CSS3를 사용하여 링 진행률 표시줄을 만드는 예를 공유합니다

최근 PC 측 프로젝트에서는 이와 같은 페이지를 만들어야 합니다. 다른 모든 것은 매우 간단하며 핵심은 다음과 같습니다. 백분율 링 효과. 처음에는 캔버스를 이용해 직접 구현하려고 계획했는데, 캔버스에 원을 구현하는 방법은 매우 간단하기 때문입니다.

CSS3을 사용하여 링 진행률 표시줄을 만드는 예

링을 구현하기 위한 캔버스 코드는 아래에 올려두었습니다. 필요하신 분들은 시도해보시면 됩니다. 오늘은 주로 CSS3 방식에 대해 이야기했는데 제가 이겼기 때문입니다. 캔버스에 대해 더 설명하지 마세요

rree

나중에 캔버스를 사용하여 구현하지 않은 이유는 제품에서 앞으로 할 일이 많다고 해서 가능하냐고 물었기 때문입니다. 작업이 99개보다 많나요? 가능하다고 했고, 상한선을 999로 설정하면 된다고 하더군요.

999개의 캔버스 링을 사용하여 렌더링하는 경우. . . 수백 개이면 충분하므로 CSS3를 사용하는 것 외에는 선택의 여지가 없습니다. 적어도 훨씬 더 빨라질 것입니다. 하지만 CSS에서는 진행률 링을 직접 그릴 수 있는 방법이 없는 것 같습니다.

완전한 코드는 나중에 올리겠지만 여기서는 일반적인 구조에 대해 설명하겠습니다.

CSS를 사용하여 진행률 표시줄 스타일을 구현하려면 애니메이션의 로딩 효과를 원하는 경우 다양한 크기의 원을 사용하여 오버레이하는 것이 유일한 방법인 것 같습니다. 계속 회전하는 건 너무한 일이겠죠. 단순하다면 정말 좋겠지만 아쉽네요. .

먼저 이렇게 배경 원을 만들어야 합니다

CSS3을 사용하여 링 진행률 표시줄을 만드는 예

그런 다음 마스크할 내부 원을 만들어야 합니다

CSS3을 사용하여 링 진행률 표시줄을 만드는 예

조금 비슷해 보이는데, 다음은 어떻게 하면 동적인 디스플레이처럼 백분율로 변화시킬 수 있을지 고민하겠습니다. js는 필수입니다. 먼저 스타일에 대해 이야기하겠습니다

다음 단계에서는 이와 같은 두 개의 반원을 만들어야 합니다

CSS3을 사용하여 링 진행률 표시줄을 만드는 예

css 반원을 구현하는 방법에는 여러 가지가 있습니다. 저는 반원을 자르기 위해 이 방법을 사용합니다. 그런 다음 js를 사용하여 왼쪽과 오른쪽 반원의 회전 각도만 조정하면 됩니다. 회전().

CSS3을 사용하여 링 진행률 표시줄을 만드는 예

마지막에 왼쪽 반원과 오른쪽 반원의 색상을 통일하는 것을 잊지 마세요. 아래에 게시하겠습니다. 소스코드는 jq

CSS3을 사용하여 링 진행률 표시줄을 만드는 예

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
</head>  
<body>  
    <canvas id="canvas" width="200" height="200"></canvas>  
    <script>  
            var canvas = document.getElementById(&#39;canvas&#39;);  
            var process = 0;  
            var context = canvas.getContext(&#39;2d&#39;);  
  
            // 画外圆  
            context.beginPath();  
            context.arc(100, 100, 80, 0, Math.PI*2);  
            context.closePath();  
            context.fillStyle = &#39;#666&#39;;  
            context.fill();  
  			drawCricle(context, process);
            
            function drawCricle(ctx, percent){  
                // 进度环  
                ctx.beginPath();  
                ctx.moveTo(100, 100);    
                ctx.arc(100, 100, 80, Math.PI * 1.5, Math.PI * (1.5 + 2 * percent / 100 ));  
                ctx.closePath();  
                ctx.fillStyle = &#39;red&#39;;  
                ctx.fill();  
  
                // 内圆
                ctx.beginPath();  
                ctx.arc(100, 100, 75, 0, Math.PI * 2);  
                ctx.closePath();  
                ctx.fillStyle = &#39;white&#39;;  
                ctx.fill();  
  
                // 填充文字  
                ctx.font= "bold 30px microsoft yahei";   
                ctx.fillStyle = "black";  
                ctx.textAlign = "center";    
                ctx.textBaseline = &#39;middle&#39;;    
                ctx.moveTo(100, 100);    
                ctx.fillText(process + &#39;%&#39;, 100, 100);  
            }  
   
    </script>  
</body>  
</html>

로그인 후 복사

를 소개하면 바로 사용할 수 있습니다.

위 내용은 CSS3을 사용하여 링 진행률 표시줄을 만드는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!