特效描述：html5 css3 圓形進度條 倒計時 頁面跳轉代碼。html5 css3進度條倒計時動畫特效

代碼結構

1. HTML代碼

html5+css3進度條倒計時動畫特效

body {

margin: 0;

padding: 0;

background: #E6EAEB;

font-family: Arial, '微軟雅黑', '宋體', sans-serif

}

.alert-box {

display: none;

position: relative;

margin: 96px auto 0;

padding: 180px 85px 22px;

border-radius: 10px 10px 0 0;

background: #FFF;

box-shadow: 5px 9px 17px rgba(102,102,102,0.75);

width: 286px;

color: #FFF;

text-align: center

}

.alert-box p {

margin: 0

}

.alert-circle {

position: absolute;

top: -50px;

left: 111px

}

.alert-sec-circle {

stroke-dashoffset: 0;

stroke-dasharray: 735;

transition: stroke-dashoffset 1s linear

}

.alert-sec-text {

position: absolute;

top: 11px;

left: 190px;

width: 76px;

color: #000;

font-size: 68px

}

.alert-sec-unit {

font-size: 34px

}

.alert-body {

margin: 35px 0

}

.alert-head {

color: #242424;

font-size: 28px

}

.alert-concent {

margin: 25px 0 14px;

color: #7B7B7B;

font-size: 18px

}

.alert-concent p {

line-height: 27px

}

.alert-btn {

display: block;

border-radius: 10px;

background-color: #4AB0F7;

height: 55px;

line-height: 55px;

width: 286px;

color: #FFF;

font-size: 20px;

text-decoration: none;

letter-spacing: 2px

}

.alert-btn:hover {

background-color: #6BC2FF

}

.alert-footer {

margin: 0 auto;

height: 42px;

width: 120px

}

.alert-footer-icon {

float: left

}

.alert-footer-text {

float: left;

border-left: 2px solid #EEE;

padding: 3px 0 0 5px;

height: 40px;

color: #0B85CC;

font-size: 12px;

text-align: left

}

.alert-footer-text p {

color: #7A7A7A;

font-size: 22px;

line-height: 18px

}

秒

花個3分鐘創建屬于您的個人帳號

您將在我們的網站享受更多

立即前往注冊

secure

安全加密

function alertSet(e) {

document.getElementById("js-alert-box").style.display = "block",

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.jq-school.com";

}else {

t -= 1,

document.getElementById("js-sec-text").innerHTML = t;

var e = Math.round(t / 10 * 735);

n.style.strokeDashoffset = e - 735

}

},

970);

}

總結

以上是生活随笔為你收集整理的html圆圈倒计时,html5 css3圆形进度条倒计时页面跳转代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。