自定义前端项目页面骨架屏

实际效果:

思路:

1、先根据页面编写骨架屏页面及样式

2、在最外层元素标签上添加“透明度动画”即可

3、根据实际业务逻辑控制显示/隐藏

代码如下:

HTML部分

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="./uskeleton.css">
</head>
<body>
    <div class="u-skeleton-container u-skeleton--animate">
        <ul class="u-skeleton-box">
            <!-- 可根据实际需要增添 li -->
            <li>
                <div class="u-skeleton-left"></div>
                <div class="u-skeleton-right">
                    <p style="width: 80%;"></p>
                    <p style="width: 60%;"></p>
                    <p style="width: 40%;"></p>
                    <p style="width: 40%;"></p>
                    <p style="width: 20%;"></p>

                    <button class="u-skeleton-btn"></button>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

CSS部分

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

.u-skeleton-container {
    width: 100%;
}

.u-skeleton-box {
    width: 100%;
    padding: 16px 16px 0;
    box-sizing: border-box;
    overflow: hidden;
}

.u-skeleton-box li {
    display: flex;
    height: 120px;
    justify-content: space-between;
    margin-top: 32px;
}

.u-skeleton-box li:first-child {
    margin-top: 0;
}

.u-skeleton-left {
    width: 120px;
    height: 120px;
    background-color: #f2f2f2;
    margin-right: 16px;
    border-radius: 4px;
    overflow: hidden;
}

.u-skeleton-right {
    position: relative;
    flex: 1;
}

.u-skeleton-right p {
    height: 16px;
    margin-top: 10px;
    background-color: #f2f2f2;
}

.u-skeleton-right p:first-child {
    margin-top: 0;
}

.u-skeleton-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 78px;
    height: 28px;
    background-color: #f2f2f2;
    border-radius: 100em;
    border: 0;
}

.u-skeleton--animate {
    -webkit-animation: u-skeleton-blink 1.2s ease-in-out infinite;
    animation: u-skeleton-blink 1.2s ease-in-out infinite;
}

@-webkit-keyframes u-skeleton-blink {
    50% {
        opacity: .4
    }
}

@keyframes u-skeleton-blink {
    50% {
        opacity: .4
    }
}

  

原文地址:https://www.cnblogs.com/muou2125/p/12706388.html

时间: 2024-11-11 12:57:07

自定义前端项目页面骨架屏的相关文章

web前端入门到实战:css实现的骨架屏方案

优点 简单,不需要工程,不用puppeteer生成骨架dom,也不需要二次开发维护 定制程度高,想怎么搞就怎么搞 不臃肿,只给你想要的 缺点 自动化程度低,需要在骨架dom上手动添加类 协同要求高,不像工程化能通过工程去约束 思路 通过伪元素实现骨架样式,通过操作样式实现骨架和页面的动态切换 实现 css部分(scss写法) 通过after伪元素生成骨架样式,并通过absolute覆盖到实际元素上 专门建立的学习Q-q-u-n: 784-783-012 ,分享学习的方法和需要注意的小细节,不停更

Vue项目骨架屏注入实践

相比于早些年前后端代码紧密耦合.后端工程师还得写前端代码的时代,如今已发展到前后端分离,这种开发方式大大提升了前后端项目的可维护性与开发效率,让前后端工程师关注于自己的主业.然而在带来便利的同时,也带来了一些弊端,比如首屏渲染时间(FCP)因为首屏需要请求更多内容,比原来多了更多HTTP的往返时间(RTT),这造成了白屏,如果白屏时间过长,用户体验会大打折扣,如果用户网速差,则FCP会更长. 由此引申出一系列的优化方法,骨架屏也因此被提出. FCP优化 在 Google 提出的以用户为中心的四个

前端骨架屏方案小结

骨架屏 最近在项目不时有用到骨架屏的需求,所以抽时间对骨架屏的方案作了一下调研,骨架屏的实践已经有很多了,也有很多人对自己的方案作了介绍.在这里按照个人的理解做了一个汇总和分类,分享给大家. 关于骨架屏(简介) 骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容.常用于文章列表.动态列表页等相对比较规则的列表页面. 很多项目中都有应用:ex:饿了么h5版本,知乎,facebook等网站中都有应用. 借个图举例如下: 两类用途 简介中

Vue页面显示骨架屏

1.什么是骨架屏幕? 在页面加载数据之前,有一段空白时间,要么用loading加载,要么就用骨架屏. 2.如何快速用Vue实现骨架屏效果? #①直接把下面的CSS代码复制,粘贴到vue项目的index.html 的 <head>...</head>里面 <style> .skeleton { position: fixed; height: 100%; overflow: hidden; padding: 15px; box-sizing: border-box; ba

在ASP.NET MVC3项目中,自定义404错误页面

在Web开发中,用户体验是至关重要的,一个友好的网站自然少不了自定义404错误页面. 让笔者为大家介绍404错误页面在ASP.NET MVC3项目中的配置: 第一步,在项目的Web.config文件中找到节点<system.web> 在此节点下添加配置        <customErrors mode="On" defaultRedirect="~/Index/Error404">          <error statusCode

gulp + webpack 构建多页面前端项目

修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例子,讲解多页面项目中如何利用gulp和webpack进行工程化构建.本文是自己的实践经验,所以有些解决方案并不是最优的,仍在探索优化中.所以有什么错误疏漏请随时指出. 使用gulp过程中的一些问题,我已经在另外一篇文章讲到了 grunt or gulp 前言 现在为什么又整了一个webpack进来呢

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇--纯前端多页面) @(HTML/JS) 一般来说,使用vue做成单页应用比较好,但特殊情况下,需要使用多页面也有另外的好处.例如手Q的多webview架构,新开页面有利于ios右划返回,也避免了返回时页面的刷新. 所以,这里我们探讨一下如何配置实现多页面的项目框架.这里是开篇,先以最简单的纯前端多页面为例入手,最终目标是完成Node.js多页面直出+前后端同构的架构. 本文源代码:https://github.c

web性能优化之页面加载体验(骨架屏)

针对web页面的首屏加载问题,一直是个问题,为此还引出一个性能考量标准:白屏时间.首屏时间. 1.白屏时间 打开chrome控制台的Performance,我们可以看到页面的渲染快照: 这段白屏时间影响的因素归根结底就是:资源加载耗时较长(chunk.js文件下载耗时35.75s): 而对于现在的大行其道的SPA来说,只要这个js文件没有执行,那么页面的代码就只是这样: 自然渲染结果暂时就只是一个白板咯 2.首屏时间 通常首屏内容中加载最慢的就是图片或者 iframe 资源,因此可以理解为当图片

前端项目从0到1的感悟

确定框架.技术点 一个项目的开始,特别是丰富多样的前端工程,首先一定要确定好采用的框架和技术点.2016年vue.js如火如荼,webpack强势崛起,但是是否就可直接拿到项目中搞起呢?答案是否定的,一个新的技术如果自己或团队中成员都还在学习摸索的过程,是肯定不能在生产环境中使用的,更何况这是个创业的团队,没有成熟完整的前端团队.所以我当时还是走老套路,jquery为核心,fastclick辅助,requireJs按需加载,arttemplate做模板渲染,核心UI类库使用jqueryWeUI,