HTML5+CSS3做一個(gè)酷炫的多彩菱形加載動(dòng)畫，代碼超簡(jiǎn)單，一個(gè)簡(jiǎn)單的動(dòng)畫，再加一個(gè)動(dòng)畫延遲，搞定。真想不到如此簡(jiǎn)單的代碼，可以做出這么好看的loading動(dòng)畫，兄弟們，可別再說(shuō)手殘做不出來(lái)啦。
效果：
源碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>菱形加載動(dòng)畫</title>
<link rel="stylesheet" href="../css/17.css">
</head>
<body>
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(200deg,#f4efef,#e3eeff);
}
.loading{
width: 200px;
height: 200px;
display: grid;
/* 制作3列的網(wǎng)格容器 */
grid-template-columns: repeat(3,1fr);
/* 設(shè)置行與列之間的間隙 */
grid-gap: 10px;
/* 對(duì)子部分進(jìn)行編號(hào) */
/* counter-reset: number; */
transform: rotate(45deg);
}
.loading span{
/* 自定義屬性 */
--c:gray;
/* 調(diào)用var函數(shù)使用自定義屬性--c */
background-color: var(--c);
position: relative;
transform: scale(0);
/* 執(zhí)行動(dòng)畫：動(dòng)畫 時(shí)長(zhǎng) 線性的 無(wú)線次播放 */
animation: blinking 2s linear infinite;
/* 動(dòng)畫延遲 */
animation-delay: var(--d);
}
.loading span::before{
/* 設(shè)置增量 */
/* counter-increment: number; */
/* 將編號(hào)賦值到content，這里有助于我們根據(jù)編號(hào)設(shè)置樣式 */
/* content: counter(number); */
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transform: rotate(-45deg);
}
.loading span:nth-child(7){
--c:#F15A5A;
--d:0s;
}
.loading span:nth-child(4),
.loading span:nth-child(8){
--c:#F0C419;
--d:0.2s;
}
.loading span:nth-child(1),
.loading span:nth-child(5),
.loading span:nth-child(9){
--c:#4EBA6F;
--d:0.4s;
}
.loading span:nth-child(2),
.loading span:nth-child(6){
--c:#2D95BF;
--d:0.6s;
}
.loading span:nth-child(3){
--c:#955BA5;
--d:0.8s;
}
/* 定義動(dòng)畫 縮放 */
@keyframes blinking{
0%,100%{
transform: scale(0);
}
40%,80%{
transform: scale(1);
}
}
