CSS3中有一個(gè)很有趣的特性，那就是類似加載的動(dòng)畫效果。這種效果可以讓網(wǎng)頁(yè)更加美觀，同時(shí)也可以提高用戶的體驗(yàn)感。

.spinner {
width: 40px;
height: 40px;
position: relative;
margin: 100px auto;
}
.spinner div {
width: 33%;
height: 33%;
background-color: #333;
border-radius: 100%;
position: absolute;
animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.spinner div:nth-child(1) {
animation-delay: -0.45s;
}
.spinner div:nth-child(2) {
animation-delay: -0.3s;
}
.spinner div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes spinner {
0% {
opacity: 0.2;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}

這是一個(gè)使用CSS3實(shí)現(xiàn)的類似加載的動(dòng)畫效果，通過(guò)給一個(gè)div容器添加子元素來(lái)創(chuàng)建。這里的animation屬性用來(lái)設(shè)置動(dòng)畫，其中包括了動(dòng)畫名、動(dòng)畫時(shí)長(zhǎng)、動(dòng)畫速度曲線、動(dòng)畫延遲等一系列參數(shù)。

通過(guò)這種方式能夠很方便地創(chuàng)建出不同的加載動(dòng)畫效果，而不需要使用任何圖像或JavaScript代碼。