HTML5 CSS3 진행률 표시줄 카운트다운 애니메이션 특수 효과 코드 [권장]_html5 튜토리얼 기술

html5 css3 진행률 표시줄 카운트다운 애니메이션 특수 효과 오늘 인터넷에서 네트워크 리소스를 찾다가 우연히 이 작품을 발견했는데 효과가 매우 좋고 매우 실용적이어서 정리해서 모두에게 공유했습니다. HTML5, JavaScript, CSS3 기술을 주로 사용하며, SVG, 원, 텍스트 등을 사용합니다. . .

핵심 코드는 다음과 같습니다

코드 복사

코드는 다음과 같습니다.

function AlertSet(e) {
document.getElementById("js-alert-box").style.display = "블록",
document.getElementById("js-alert-head").innerHTML = e
var t =; 10,
n = document.getElementById("js-sec-circle");
document.getElementById("js-sec-text").innerHTML = t,
setInterval(function() {
if (0 == t){
location.href="http://www.jb51.net";
}else {
t -= 1,
document.getElementById( "js- sec-text").innerHTML = t;
var e = Math.round(t / 10 * 735)
n.style.StrokeDashoffset = e - 735
}
} ,
970)

효과는 다음과 같습니다.

위 HTML5 css3 진행률 표시줄 카운트다운 애니메이션 특수 효과 코드 [권장]은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. Script Home을 지원해 주시길 바랍니다.