首頁  >  文章  >  web前端  >  使用純css實作簡單載入動畫效果(程式碼實例)

使用純css實作簡單載入動畫效果(程式碼實例)

青灯夜游
青灯夜游轉載
2021-03-22 10:01:252999瀏覽

本篇文章透過程式碼實例介紹一下使用純css如何實作簡單載入動畫效果。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

使用純css實作簡單載入動畫效果(程式碼實例)

【推薦教學:CSS影片教學

看到目前很多網站的載入效果用的是gif 圖片,於是很好奇了,只要用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實作簡單載入動畫效果(程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除