实现加载点点点效果

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=None">
<style type="text/css">

/*@supports (display:none) {
dot {
display: inline-block;
width: 3ch;
text-indent: -1ch;
vertical-align: bottom;
overflow: hidden;
animation: dot 3s infinite step-start both;
font-family: Consolas, Monaco, monospace;
}
}

@keyframes dot {
33% { text-indent: 0; }
66% { text-indent: -2ch; }
}*/
@keyframes dot {
33% { transform: translateY(-2em);-webkit-transform: translateY(-2em);}
66% { transform: translateY(-1em);-webkit-transform: translateY(-1em);}
}
@-webkit-keyframes dot {
33% { transform: translateY(-2em);-webkit-transform: translateY(-2em);}
66% { transform: translateY(-1em);-webkit-transform: translateY(-1em);}
}
.dot{

display: inline-block;
height:1em;
line-height: 1;
vertical-align: -.25em;
overflow: hidden;
}
.dot:before{
display: block;
content: '...\a..\a.';
white-space: pre-wrap;
animation: dot 3s infinite step-start both;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<!-- <a href="javascript:" class="grebtn">订单提交中<dot>...</dot></a> -->
<p>订单提交中<dot class="dot">...</dot></p>
</body>

posted @ 2018-06-07 21:07  szchenrong  阅读(240)  评论(0)    收藏  举报