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

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

WBOY
풀어 주다: 2016-05-16 15:45:36
원래의
2232명이 탐색했습니다.

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을 지원해 주시길 바랍니다.

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿