效果:
完整代码如下:
<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>
补充:数组对象增加属性名
var arr = [
{
value:'1',
id:'1'
},
{
value:'2',
id:'2'
}
]
let new_arr = arr.map( item =>{
return Object.assign(item,{isChecked: false})
})