Html
    Css
    Js

    
                        
@-webkit-keyframes stripe-slide {
	0% {
	background-position:0% 0;
}
100% {
	background-position:100% 0;
}
}@keyframes stripe-slide {
	0% {
	background-position:0% 0;
}
100% {
	background-position:100% 0;
}
}.btn {
	overflow:visible;
	margin:0;
	padding:0;
	border:0;
	background:transparent;
	font:inherit;
	line-height:normal;
	cursor:pointer;
	-moz-user-select:text;
	text-decoration:none;
	text-transform:uppercase;
	padding:8px 20px 13px;
	background-color:#fff;
	color:#666;
	border:2px solid #666;
	border-radius:6px;
	margin-bottom:6px;
	transition:all 0.5s ease;
}
.btn::-moz-focus-inner {
	padding:0;
	border:0;
}
.btn--stripe {
	overflow:hidden;
	position:relative;
}
.btn--stripe:after {
	content:"";
	display:block;
	height:7px;
	width:100%;
	background-image:repeating-linear-gradient(45deg,#000,#000 1px,transparent 2px,transparent 5px);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	border-top:1px solid #666;
	position:absolute;
	left:0;
	bottom:0;
	background-size:7px 7px;
}
.btn--stripe:hover,.btn--stripe:focus {
	background-color:#189F92;
	color:#fff;
	border-color:#189F92;
	outline:0 none;
}
.btn--stripe:hover:after,.btn--stripe:focus:after {
	background-image:repeating-linear-gradient(45deg,#fff,#fff 1px,transparent 2px,transparent 5px);
	border-top:1px solid #fff;
	-webkit-animation:stripe-slide 12s infinite linear forwards;
	animation:stripe-slide 12s infinite linear forwards;
}
.btn--large {
	width:50%;
}
.btn--radius {
	border-radius:36px;
}
.start {
	border:1px solid #ddd;
	padding:0.5rem 1rem;
	border-radius:5px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

多定时器倒计时2

之前写的逻辑上有点小bug,因为不能在原地址上更新就重新发布了

0