這篇文章帶給大家的內容是關於如何使用純CSS實現菱形loader效果(附源碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
效果預覽
原始碼下載
https://github.com/comehope/front-end-daily -challenges
程式碼解讀
定義dom,一個容器包含9 個子元素:
1 2 3 4 5 6 7 8 9 10 11 | <div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
|
登入後複製
居中顯示:
1 2 3 4 5 6 7 8 | body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
|
登入後複製
定義容器和子元素尺寸,是一個大正方形裡包含9 個小正方形:
1 2 3 4 5 6 7 | .loader {
width: 10em;
height: 10em;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0.5em;
}
|
登入後複製
把圖案調整為大菱形中包含9 個小菱形:
1 2 3 | .loader {
transform: rotate(45deg);
}
|
登入後複製
以垂直的小菱形為單位,為小菱形區塊著色:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .loader span {
background-color: var (--c);
}
.loader span:nth-child(7) {
--c: tomato;
}
.loader span:nth-child(4),
.loader span:nth-child(8) {
--c: gold;
}
.loader span:nth-child(1),
.loader span:nth-child(5),
.loader span:nth-child(9) {
--c: limegreen;
}
.loader span:nth-child(2),
.loader span:nth-child(6) {
--c: dodgerblue;
}
.loader span:nth-child(3) {
--c: mediumpurple;
}
|
登入後複製
定義動畫效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .loader span {
animation: blinking 2s linear infinite;
animation-delay: var (--d);
transform: scale(0);
}
@keyframes blinking {
0%, 100% {
transform: scale(0);
}
40%, 80% {
transform: scale(1);
}
}
|
登入後複製
最後,為小菱形設定時延,增強動感:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .loader span:nth-child(7) {
--d: 0s;
}
.loader span:nth-child(4),
.loader span:nth-child(8) {
--d: 0.2s;
}
.loader span:nth-child(1),
.loader span:nth-child(5),
.loader span:nth-child(9) {
--d: 0.4s;
}
.loader span:nth-child(2),
.loader span:nth-child(6) {
--d: 0.6s;
}
.loader span:nth-child(3) {
--d: 0.8s;
}
|
登入後複製
大功告成!
#
以上是如何使用純CSS實現菱形loader效果(附源碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!