ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 css3プログレスバーカウントダウンアニメーション特殊効果コード【推奨】_html5チュートリアルスキル

HTML5 css3プログレスバーカウントダウンアニメーション特殊効果コード【推奨】_html5チュートリアルスキル

WBOY
WBOYオリジナル
2016-05-16 15:45:362199ブラウズ

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 をサポートしていただければ幸いです。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。