CSS3动态省略号

最新推荐文章于 2023-10-07 14:45:20 发布

小黑前端攻城狮

最新推荐文章于 2023-10-07 14:45:20 发布

阅读量531

点赞数

文章标签： html css3

本文链接：https://blog.csdn.net/weixin_43751946/article/details/109614912

版权

效果：在这里插入图片描述

完整代码如下：

<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
评论
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
复制链接

扫一扫