H5刷新時的css

H5頁面的刷新操作很常見，但是有時候我們不希望頁面在刷新時出現(xiàn)閃爍或是變形的情況。這就需要使用一些特定的CSS技巧來避免這種問題。

下面是一些常見的CSS技巧：

body {
opacity: 0;
}
/* 加載頁面時 */
body.loading {
opacity: 0;
}
/* 當資源加載完時 */
body.loaded {
opacity: 1;
transition: opacity .3s ease-in-out;
}

這個CSS代碼片段的作用是，在頁面加載時設(shè)置頁面透明度為0，意味著內(nèi)容無法顯示，而加載中和加載完成時則通過添加或去掉loading和loaded類來控制透明度。這就實現(xiàn)了刷新時的平滑過渡。同時，由于添加了transition屬性，頁面的透明度變化會比較自然。

另外一種刷新沒有閃爍的效果是：

body {
position: relative;
}
/* 列表或分隔符樣式 */
hr, ul {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
/* 頁面占位符樣式 */
body:after {
content: '';
display: block;
height: 100vh;
}

這個CSS代碼片段的作用是，在刷新時，通過為頁面添加一個占位符，避免了頁面發(fā)生變形。而通過為列表和分隔符添加位置CSS規(guī)則，避免了這些元素在刷新時發(fā)生閃爍。同時，由于添加了position: relative屬性，可以控制元素的位置。

以上兩種技巧可以使刷新更為平滑，從而提高用戶的體驗和頁面的質(zhì)量。在實際開發(fā)中，同樣可以結(jié)合自己的具體業(yè)務(wù)場景，使用更多的CSS技巧進行優(yōu)化。