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>

你可能感兴趣的:(html,css3)