CSS骨架加載動畫是一種可以增強用戶體驗的動畫效果。它可以在頁面加載時,用一種看似是頁面框架的形式來代替頁面內容加載,讓用戶在等待頁面加載時不至于感到無聊或者失去耐心。
/* CSS骨架動畫樣式代碼 */ body { background-color: #eff1f4; font-family: Arial, sans-serif; } .loader { display: block; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 9999; background-color: #fff; } .shimmer { background: linear-gradient(to right, #ededed 8%, #dddddd 18%, #ededed 33%); background-size: 800px 104px; height: 96px; position: relative; } .shimmer__line { height: 100%; width: 50%; position: absolute; animation: shimmer 2s infinite; } .shimmer__line--one { left: -25%; } .shimmer__line--two { right: -25%; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
這個骨架動畫樣式包含了一個 .loader 和 .shimmer 兩個主要樣式名,.loader 為整個骨架的容器,而 .shimmer 包含了一段實現了跑馬燈效果的條紋。
其中,.shimmer__line--one 和 .shimmer__line--two 是條紋的兩個不同方向的實例,通過 background 屬性設置其漸變效果,并且通過 animation 屬性啟動動畫。
通過這個樣式代碼,我們可以靈活地使用它來代替頁面的真實內容,在頁面加載時使用這個骨架動畫,可以增強用戶使用體驗,也可以加深你的網站印象。
下一篇CSS骨架屏