css3製做動態的省略號

時間 2019-11-13

標籤 css3 css 製做動態省略號欄目 CSS 简体版

原文原文鏈接

效果如左邊，完整代碼以下：css

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。