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>

补充:数组对象增加属性名

var arr = [
      {
        value:'1',
        id:'1'
      },
      {
        value:'2',
        id:'2'
      }
    ]
    let new_arr = arr.map( item =>{
      return Object.assign(item,{isChecked: false})
    })
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值