HTML5+CSS3實(shí)現(xiàn)炫彩愛(ài)心加載特效，9根普通的線條，通過(guò)變換長(zhǎng)度，即可打造一個(gè)動(dòng)感炫彩的心形loading加載動(dòng)畫，變換過(guò)程伴隨了模糊，更讓這個(gè)loading動(dòng)畫更細(xì)膩、更富律動(dòng)。
效果：
源碼：
<!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>炫彩愛(ài)心加載特效</title>
<link rel="stylesheet" href="../css/11.css">
</head>
<body>
<div class="heart">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
body{
margin: 0;
/* 100%窗口高度 */
height: 100vh;
/* 彈性布局 水平、垂直居中 */
display: flex;
align-items: center;
justify-content: center;
/* 背景徑向漸變 */
background: radial-gradient(circle at center,mediumpurple, #000000);
}
.heart{
width: 280px;
height: 220px;
font-size: 20px;
display: flex;
justify-content: space-between;
}
.heart span{
/* 自定義屬性值 */
--c:lightblue;
--h:50%;
--t:25%;
width: 20px;
/* var()函數(shù)用于插入自定義的屬性值，如果一個(gè)屬性值在多處被使用，該方法就很有用 */
background-color: var(--c);
border-radius: 10px;
position: relative;
height: var(--h);
top: var(--t);
/* 執(zhí)行動(dòng)畫 infinite是無(wú)限次播放 */
animation: beating 1s infinite;
}
.heart span:nth-child(1),
.heart span:nth-child(9){
--c:lightcoral;
--h:60px;
--t:44px;
}
.heart span:nth-child(2),
.heart span:nth-child(8){
--c:lightskyblue;
--h:120px;
--t:12px;
}
.heart span:nth-child(3),
.heart span:nth-child(7){
--c:lightgreen;
--h:160px;
--t:0;
}
.heart span:nth-child(4),
.heart span:nth-child(6){
--c:gold;
--h:180px;
--t:16px;
}
.heart span:nth-child(5){
--c:plum;
--h:188px;
--t:32px;
}
/* 接下來(lái)定義動(dòng)畫 */
@keyframes beating{
0%,30%{
height: var(--h);
top: var(--t);
background-color: var(--c);
filter: blur(0);
}
60%,70%{
height: 50%;
top: 25%;
background-color: plum;
/* 模糊度 */
filter: blur(5px);
}
}
