色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css骨架加載動畫

錢諍諍2年前8瀏覽0評論

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 屬性啟動動畫。

通過這個樣式代碼,我們可以靈活地使用它來代替頁面的真實內容,在頁面加載時使用這個骨架動畫,可以增強用戶使用體驗,也可以加深你的網站印象。