如何使用純css實現簡單加載動畫效果

小編給大家分享一下如何使用純css實現簡單加載動畫效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

效果圖

思路

CSS 用于修飾 HTML，所以即便是再簡單的效果，都是要依賴于 HTML 的，而本例效果的實現 HTML 布局更是重中之重。

先來分析動畫效果組成：

• 線條

• 加載靜止的話，就是幾個線條組成了一個圈

• 這些線條長度一致，只是方向有所差別

• 每個線條不是貫穿整個直徑，而是以半徑為單位

• 圓

• 整體效果是一個圓環，內圓的背景色和整個背景一致

• 動畫

• 從某一個線條開始，每個半徑線條顏色（透明度）逐個發生變化

綜上，我們用以下步驟一步步解開加載效果的神秘面紗：

（1）用 HTML 實現沿某個點分布的相同線條，由它們組成一個圓形

（2）畫一個小圓，添加背景色，并覆蓋至線條圓心處

（3）添加漸變動畫，使線條透明度發生變化

（4）通過給不同線條設置不同動畫延遲，讓線條動起來

HTML

<div id="container">
	<div class="load-line rotate-0">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-30">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-60">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-90">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-120">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-150">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div id="circle-center"></div>
</div>

解析：

• load-line 表示在同一直徑的半徑線條，由于旋轉方向一致，將其放在同一 p 中

• 由于每個半徑線條的動畫延遲不一樣，添加 left 和 right 兩種線條

• circle-center 表示內圓

CSS

#container, #circle-center {
	background: grey;
}
#container {
	position: relative;
	width: 600px;
	height: 300px;
}
#circle-center {
	position: absolute;
	top: 100px;
	left: 250px;
	width: 100px;
	height: 100px;
	border-radius: 100px;
}
.load-line {
	position: absolute;
	top: 150px;
	left: 200px;
	width: 200px;
	height: 13px;
}
.load-line > span {
	display: inline-block;
	width: 50%;
	height: 100%;
	border-radius: 20px;
	background: white;
}
.left {
	float: left;
}
.right {
	float: right;
}
.rotate-0 {
	transform: rotate(0);
}
.rotate-0 > .left {
	animation: load-effect 1.2s linear 0s infinite;
}
.rotate-0 > .right {
	animation: load-effect 1.2s linear 0.6s infinite;
}
.rotate-30 {
	transform: rotate(30deg);
}
.rotate-30 > .left {
	animation: load-effect 1.2s linear 0.1s infinite;
}
.rotate-30 > .right {
	animation: load-effect 1.2s linear 0.7s infinite;
}
.rotate-60 {
	transform: rotate(60deg);
}
.rotate-60 > .left {
	animation: load-effect 1.2s linear 0.2s infinite;
}
.rotate-60 > .right {
	animation: load-effect 1.2s linear 0.8s infinite;
}
.rotate-90 {
	transform: rotate(90deg);
}
.rotate-90 > .left {
	animation: load-effect 1.2s linear 0.3s infinite;
}
.rotate-90 > .right {
	animation: load-effect 1.2s linear 0.9s infinite;
}
.rotate-120 {
	transform: rotate(120deg);
}
.rotate-120 > .left {
	animation: load-effect 1.2s linear 0.4s infinite;
}
.rotate-120 > .right {
	animation: load-effect 1.2s linear 1.0s infinite;
}
.rotate-150 {
	transform: rotate(150deg);
}
.rotate-150 > .left {
	animation: load-effect 1.2s linear 0.5s infinite;
}
.rotate-150 > .right {
	animation: load-effect 1.2s linear 1.1s infinite;
}
@keyframes load-effect {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

解析：

• 整個效果的父容器需要設置非 static 的定位，方便子元素布局。本例為 relative

• 所有線條大小一致，并且有圓角

• 沿同一直徑方向的線條旋轉角度一致

• 所有線條動畫效果一致（透明度在變化），動畫時長一致，動畫延遲從某一個線條開始，逐個遞加

以上是“如何使用純css實現簡單加載動畫效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！