찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3에서 순환 진행률 표시줄을 구현하는 방법은 무엇입니까? CSS3에서 순환 진행률 표시줄 구현

CSS3에서 순환 진행률 표시줄을 구현하는 방법은 무엇입니까? CSS3에서 순환 진행률 표시줄 구현

不言
不言원래의
2018-10-20 10:34:0011801검색

진행률 표시줄이 자주 보이는데 어떻게 구현하나요? 이전 글(css3에서 진행률 표시줄을 구현하는 방법? css3에서 진행률 표시줄 구현 방법 소개)에서 CSS3에서 긴 진행률 표시줄을 구현하는 방법에 대해 간략하게 설명했습니다. 오늘의 글은 CSS3 순환진행바 구현방법에 대해 소개해드리겠습니다. 관심있는 친구들은 한번 살펴보세요.

우리 모두는 다음과 같이 정적 원형 모양을 만드는 것이 매우 간단하다는 것을 알고 있습니다. 

<!DOCTYPE html>
<html>
<head>
<style> 
.circle{
    width: 160px;
    height: 160px;
    border:20px solid orange;
    border-radius: 50%;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>

css3 원형 효과는 다음과 같습니다.# 🎜🎜 #

CSS3에서 순환 진행률 표시줄을 구현하는 방법은 무엇입니까? CSS3에서 순환 진행률 표시줄 구현

하지만 원형 진행률 표시줄은 동적 효과이므로 고려해야 할 사항이 많습니다. 먼저 CSS 서클을 살펴보겠습니다. 진행률 표시줄 구현 아이디어:

전체 링을 왼쪽과 오른쪽 부분으로 나눌 수 있습니다. 예를 들어 먼저 오른쪽 반원을 회전시킨 다음 연결합니다. 왼쪽 반원을 회전한 다음 왼쪽 반원을 회전하면 원형 진행률 표시줄인 전체 링의 회전이 실현될 수 있습니다.

CSS3 순환 진행률 표시줄의 구체적인 구현 방법을 살펴보겠습니다.

먼저 css3의 오른쪽 반원 구현을 살펴보겠습니다

<div class="right">
    <div class="rightcircle"></div>
</div>
rrree

css3의 오른쪽 반원 구현 효과는 다음과 같습니다.

CSS3에서 순환 진행률 표시줄을 구현하는 방법은 무엇입니까? CSS3에서 순환 진행률 표시줄 구현

css3 왼쪽 반원은 오른쪽 반원과 정확히 반대입니다. 코드는 다음과 같습니다. 

.right{
    position: relative;
    width: 100px;
    height: 200px;
    overflow: hidden;
}
.rightcircle{
    width: 160px;
    height: 160px;
    border:20px solid transparent;
    border-radius: 50%;
    position: absolute;
    top:0;
    right: 0;
    border-top:20px solid lightblue;
    border-right:20px solid lightblue;
    -webkit-transform : rotate(45deg);
    -moz-transform : rotate(45deg);
    -o-transform : rotate(45deg);
    transform : rotate(45deg); /* 旋转45度 */
}
/* 这里仅考虑webkit内核的情况，您可以写完整了 */
.rightcircle{
    -webkit-animation-name: circle_right; /* 动画名称 */
    -webkit-animation-duration: 5s;  /* 完成一个动画需要的时间 */
    -webkit-animation-timing-function: linear; /* 动画播放的方式，linear是匀速变化 */
    -webkit-animation-iteration-count: infinite;  /* 动画播放的次数，infinite是无限次数 */
}
@-webkit-keyframes circle_right{
    0%{
        transform : rotate(-135deg);
    }
    100%{
        transform : rotate(45deg);
    }
}

css3 왼쪽 반원의 효과는 다음과 같습니다. :

CSS3에서 순환 진행률 표시줄을 구현하는 방법은 무엇입니까? CSS3에서 순환 진행률 표시줄 구현#🎜 🎜#두 개의 반원이 구현되었습니다. 다음으로 CSS3 원형 진행률 표시줄의 효과를 얻으려면 두 개의 반원만 연결하면 됩니다.

Css3에서 순환 진행률 표시줄을 구현하는 코드는 다음과 같습니다. # 🎜🎜#

.right{
    position: relative;
    width: 100px;
    height: 200px;
    overflow: hidden;
}
.rightcircle{
    width: 160px;
    height: 160px;
    border:20px solid transparent;
    border-radius: 50%;
    position: absolute;
    bottom:0;
    left: 0;
    border-bottom:20px solid lightblue;
    border-left:20px solid lightblue;
    -webkit-transform : rotate(45deg);
    -moz-transform : rotate(45deg);
    -o-transform : rotate(45deg);
    transform : rotate(45deg); /* 旋转45度 */
}
/* 这里仅考虑webkit内核的情况，您可以写完整了 */
.rightcircle{
    -webkit-animation-name: circle_right; /* 动画名称 */
    -webkit-animation-duration: 5s;  /* 完成一个动画需要的时间 */
    -webkit-animation-timing-function: linear; /* 动画播放的方式，linear是匀速变化 */
    -webkit-animation-iteration-count: infinite;  /* 动画播放的次数，infinite是无限次数 */
}
@-webkit-keyframes circle_right{
    0%{
        transform : rotate(-135deg);
    }
    100%{
        transform : rotate(45deg);
    }
}
rrree

css3에서 순환 진행률 표시줄의 효과는 다음과 같습니다.

#🎜 🎜#

이 글은 여기서 끝납니다. 더 흥미진진합니다. 내용은 PHP 중국어 웹사이트에 주목하세요! ! !

CSS3에서 순환 진행률 표시줄을 구현하는 방법은 무엇입니까? CSS3에서 순환 진행률 표시줄 구현

위 내용은 CSS3에서 순환 진행률 표시줄을 구현하는 방법은 무엇입니까? CSS3에서 순환 진행률 표시줄 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php css css3
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：순수 CSS를 사용하여 머티리얼 디자인 버튼의 워터 드롭 애니메이션 효과를 얻는 방법다음 기사：순수 CSS를 사용하여 머티리얼 디자인 버튼의 워터 드롭 애니메이션 효과를 얻는 방법

관련 기사

더보기