html5 css3 プログレスバーのカウントダウンアニメーション特殊効果。今日インターネットでネットワークリソースを探していたときに偶然この作品を発見しました。その効果が非常に優れており、非常に実用的だったので、整理してみんなに共有しました。主にHTML5、JavaScript、CSS3の技術が使用され、SVG、サークル、テキストが使用されます。 。 。
コアコードは次のとおりです
function warningSet(e) {
document.getElementById("js-alert-box").style.display = "ブロック",
document.getElementById("js-alert-head").innerHTML = e; 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.bloodDashoffset = e - 735
}
} 、
970);
効果は次のとおりです:
上記の HTML5 CSS3 プログレス バー カウントダウン アニメーション特殊効果コード [推奨] は、エディターによって共有されたすべての内容です。参考にしていただければ幸いです。また、Script Home をサポートしていただければ幸いです。