編碼的世界 / 優質文選 / 生涯

用CSS實現LOADING省略號動畫


2022年3月24日
-   

這段CSS代碼使用CSS3的幀動畫來模擬loading文字後面的3個小省略號的動畫效果。
.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 2s infinite;
content: "2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}

熱門文章