master

分支 (1)

管理

管理

master

submitIng
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>兼容性良好的css3点点点loading动画提交效果</title>
	<style>
		body{text-align: center}
		.grebtn{
			display: inline-block;
		    padding: 0.5em 1.25em;
		    border: 1px solid;
		    border-radius: 2px;
		    vertical-align: bottom;
		    font-weight: inherit;
		    border-color: #208000 #1F7F00;
		    background-color: #289600;
		    box-shadow: inset 0 0 1px rgba(255,255,255,.6), 0 1px #8DBF62;
		    color: #fff;
		    text-shadow: 0 -1px #137900;
		    margin: 100px auto;
		}
		dot {
		    display: inline-block;
		    height: 1em; line-height: 1;
		    text-align: left;
		    vertical-align: -.25em;
		    overflow: hidden;
		}
		dot::before {
		    display: block;
		    content: '...\A..\A.';
		    white-space: pre-wrap;
		    animation: dot 3s infinite step-start both;
		}
		@keyframes dot {
		    33% { transform: translateY(-2em); }
		    66% { transform: translateY(-1em); }
		}
	</style>
</head>
<body>

	<!-- 代码部分begin -->
	<div class="grebtn">订单提交中<dot>...</dot></div>
	<!-- 代码部分end -->

</body>
</html>