web前端入門到實戰：css實現的骨架屏方案

發布時間：2020-08-04 01:32:03

來源：51CTO

閱讀：152

作者：前端向南

優點

簡單，不需要工程，不用puppeteer生成骨架dom，也不需要二次開發維護

定制程度高，想怎么搞就怎么搞

不臃腫，只給你想要的

缺點

自動化程度低，需要在骨架dom上手動添加類

協同要求高，不像工程化能通過工程去約束

思路

通過偽元素實現骨架樣式，通過操作樣式實現骨架和頁面的動態切換

實現

css部分(scss寫法)

通過after偽元素生成骨架樣式，并通過absolute覆蓋到實際元素上

專門建立的學習Q-q-u-n： 784-783-012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習技巧

(從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃)

.skt-loading {

pointer-events: none; /* 加載中阻止事件 */

.skeleton {

position: relative;

overflow: hidden;

border: none !important;

border-radius: 5px;

background-color: transparent !important;

background-image: none !important;

&::after {

content: '';

position: absolute;

left: 0;

top: 0;

z-index: 9;

width: 100%;

height: 100%;

background-color: #EBF1F8;

display: block;

}

/* 下面這部分都是自定義的，看需求修改 */

&:not(.not-round)::after {

border-radius: 4px;

}

&:not(.not-before)::before {

position: absolute;

top: 0;

width: 30%;

height: 100%;

content: "";

background: linear-gradient(to right,rgba(255,255,255,0) 0,

rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);

transform: skewX(-45deg);

z-index: 99;

animation: skeleton-ani 1s ease infinite;

display: block;

}

&.badge {

&::after {

background-color: #F8FAFC;

}

}

}

}

@keyframes skeleton-ani { /* 骨架屏動畫 */

from {

left: -100%;

}

to {

left: 150%;

}

}

html部分

只需要在你認為合理的骨架粒度元素上添加skeleton類即可

js部分

控制好skt-loading類的切換

使用注意

after偽元素無法插入到inputimg等非容器元素中，所以如果需要添加skleton，則需要再加一層元素將其包裹

對于像vuereact數據驅動頁面需要先有mock數據以生成dom

總結

以上是生活随笔為你收集整理的html前端页面的基本骨架是,web前端入门到实战：css实现的骨架屏方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。