css3制作动态的省略号

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

weixin_34220834

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

阅读量444

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2612473/blog/1477075

版权

2019独角兽企业重金招聘Python工程师标准>>>

效果如左边，完整代码如下：

<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>

转载于:https://my.oschina.net/u/2612473/blog/1477075