点击开始十秒倒计时html,十秒倒计时案例.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: