이번에는 Yuansheng CSS3를 사용하여 링 로딩 진행률 표시줄 을 구현하는 방법을 보여 드리겠습니다. Yuansheng CSS3를 사용하여 링 로딩 진행률 표시줄을 구현할 때 주의사항은 무엇입니까? 다음은 실제 사례입니다. 바라보다.
렌더링:
당시 요구 사항은 부채꼴 그라데이션 효과로 진행률 표시줄을 로드하는 것이었습니다. 오랫동안 생각해 봤는데, 그래디언트 이미지를 만드는 유일한 방법은 border-img를 사용하는 것 뿐인 것 같습니다. 또 다른 엄청나게 어리석은 방법은 진행률 표시줄에 분산된 50개의 직사각형을 작성하는 것입니다. CSS3에서 제공하는 그래디언트에는 선형 그래디언트, 방사형 그래디언트 및 반복 그래디언트가 포함됩니다. 부채 모양 그래디언트를 얻는 방법을 알 수 없습니다. 더 이상 이야기하지 말고 코드를 살펴보겠습니다.
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .wrap,.circle,.percent{ position: absolute; width: 200px; height: 200px; border-radius: 50%; } .wrap{ top:50px; left:50px; background-color: #ccc; } .circle{ box-sizing: border-box; border:20px solid #ccc; clip:rect(0,200px,200px,100px); } .clip-auto{ clip:rect(auto, auto, auto, auto); } .percent{ box-sizing: border-box; top:-20px; left:-20px; } .left{ transition:transform ease; border:20px solid blue; clip: rect(0,100px,200px,0); } .right{ border:20px solid blue; clip: rect(0,200px,200px,100px); } .wth0{ width:0; } .num{ position: absolute; box-sizing: border-box; width: 160px; height: 160px; line-height: 160px; text-align: center; font-size: 40px; left: 20px; top: 20px; border-radius: 50%; background-color: #fff; z-index: 1; } </style> <script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script> </head> <body> <p class="wrap"> <p class="circle"> <p class="percent left"></p> <p class="percent right wth0"></p> </p> <p class="num"><span>0</span>%</p> </p> </body> <script> var percent=0; var loading=setInterval(function(){ if(percent>100){ percent=0; $('.circle').removeClass('clip-auto'); $('.right').addClass('wth0'); }else if(percent>50){ $('.circle').addClass('clip-auto'); $('.right').removeClass('wth0'); } $('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)"); $('.num>span').text(percent); percent++; },200); </script> </html>
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 소스 CSS3을 사용하여 링 로딩 진행률 표시줄을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!