Html
    Css
    Js


/* 上拉加載 */
	.load_more_box {
	height:40px;
	line-height:40px;
	position:relative;
	text-align:center;
}
.load_more_box span {
	width:5px;
	height:5px;
	margin:0 1px;
	display:inline-block;
	vertical-align:middle;
	background:#9b59b6;
	animation:load_more_box 1.5s  infinite ease-in-out;
}
.load_more_box span:nth-child(2) {
	animation-delay:.2s;
}
.load_more_box span:nth-child(3) {
	animation-delay:.4s;
}
.load_more_box span:nth-child(4) {
	animation-delay:.6s;
}
.load_more_box span:nth-child(5) {
	animation-delay:.8s;
}
@keyframes load_more_box {
	0% {
	height:5px;
	background:#9b59b6;
}
25% {
	height:30px;
	background:#0081ff;
}
50% {
	height:5px;
	background:#9b59b6;
}
100% {
	height:5px;
	background:#9b59b6;
}
}

↑上面代碼改變,會自動顯示代碼結果 jQuery調用版本:2.1.4
 立即下載

css加載中動畫(原創)

2019山东十一选五杀号 www.xvcvn.com 更新時間:2019-11-18 22:44:09

使用簡單的css animation動畫, 通過延時,為dom中的每一個span標簽改變高度,達到信號式加載中動畫。

0