木灵鱼儿
vue 项目实战
利用css实现SPA首屏骨架屏
前言最近新学到一招,利用原生css实现首屏骨架,这样即可以省去在Home.vue组件中单独创建骨架,而且对html结构是0添加。先看看预览图:效果还是可以的。教程原理就是利用background-image的多重渐变实现骨架占位,配合background-size和background-position进行精准定位,如果你的骨架是大量重复内容,还可以配置background-repeat: repeat-y;进行y轴重复渲染,效果更佳。然后通过动画控制整体的透明度变化实现动效。再通过:empty伪类实现对#app是否渲染的判断。:empty会在对应的元素内部没有任何内容时生效。不多说,直...
![利用css实现SPA首屏骨架屏](https://mulingyuer-1253375624.cos.ap-guangzhou.myqcloud.com/%E5%9B%BE%E7%89%87%E7%A9%BA%E9%97%B4/%E5%88%A9%E7%94%A8css%E5%AE%9E%E7%8E%B0SPA%E9%A6%96%E5%B1%8F%E9%AA%A8%E6%9E%B601.gif!Anti_theft)
最近评论