css3制作动态的省略号 原
效果如左边，完整代码如下：
<html>
<head>
<meta charset="utf-8" />
<title>动态点</title>
</head>
<style type="text/css">
.a-inspector-loader {
background-color: #ed3160;
position: fixed;
left: 3px;
top: 3px;
padding: 6px 10px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-family: Roboto,sans-serif;
text-align: center;
z-index: 99999;
width: 174px
}
@keyframes dots-1 {
from {
opacity: 0
}
25% {
opacity: 1
}
}
@keyframes dots-2 {
from {
opacity: 0
}
50% {
opacity: 1
}
}
@keyframes dots-3 {
from {
opacity: 0
}
75% {
opacity: 1
}
}
@-webkit-keyframes dots-1 {
from {
opacity: 0
}
25% {
opacity: 1
}
}
@-webkit-keyframes dots-2 {
from {
opacity: 0
}
50% {
opacity: 1
}
}
@-webkit-keyframes dots-3 {
from {
opacity: 0
}
75% {
opacity: 1
}
}
.a-inspector-loader .dots span {
animation: dots-1 2s infinite steps(1);
-webkit-animation: dots-1 2s infinite steps(1);
}
.a-inspector-loader .dots span:first-child+span {
animation-name: dots-2;
-webkit-animation-name: dots-2;
}
.a-inspector-loader .dots span:first-child+span+span {
animation-name: dots-3;//第三个点的动画名称
-webkit-animation-name: dots-3;
}
</style>
<body>
<div class="a-inspector-loader" style="font-size:18px;">正在加载中<span class="dots"><span>.</span><span>.</span><span>.</span></span></div>
</body>
</html>(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017/07/21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读