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
 立即下载

多定时器倒计时

要做一个功能需要将按钮状态的存储其中涉及到按钮的定时,在网上找了段代码修改了下文字输出的逻辑 gettimerstring 函数按钮样式

可以根据自己需求随意更改

html显示倒计时的元素为id为 timer+数字按钮绑定点击的class为 inter 根据class为 inter+数字 来填充 id timer+数字 (例如 .inter1 点击=> #timer1 输出倒计时时间)data-time 需要倒计时的时间~~~~~~~css按钮的基本样式为 btn btn--stripebtn--radius 按钮圆角  btn--large 按钮变大

1
      .1
      2019/1/17 16:24:51

      逻辑上有点小bug,在秒数为0时会显示不正确,在gettimerstring里把for循环改一下

       for (var i = 0; i < arr.length; i++)(arr[i] || i == arr.length - 1) && (str += arr[i] + txt[i]);
      回复