.chiaroscuro {
background: #f2f2f2;
animation-duration: 1.5s;
animation-name: blink;
animation-iteration-count: infinite;
} @keyframes blink {
0% {
opacity: .4;
}
50% {
opacity: 1;
}
100% {
opacity: .4;
}
} @keyframes flush {
0% {
left: -100%;
} 50% {
left: 0;
} 100% {
left: 100%;
}
}

使用时添加上类名chiaroscuro,动画时间duration及线条框背景颜色自己可以调整

骨架屏css样式的更多相关文章

  1. Vue 项目骨架屏注入与实践

    作为与用户联系最为密切的前端开发者,用户体验是最值得关注的问题.关于页面loading状态的展示,主流的主要有loading图和进度条两种.除此之外,越来越多的APP采用了“骨架屏”的方式去展示未加载 ...

  2. Vue项目骨架屏注入实践

    相比于早些年前后端代码紧密耦合.后端工程师还得写前端代码的时代,如今已发展到前后端分离,这种开发方式大大提升了前后端项目的可维护性与开发效率,让前后端工程师关注于自己的主业.然而在带来便利的同时,也带 ...

  3. 微信小程序 - 深度定义骨架屏(提示)

    此举每个页面必须创建对应的css样式,比较麻烦(但非常准确),推荐使用组件化的skeleton组件 原理很简单:知晓一下this.setData原理,就OK了,可能大家会因此了解到全屏加载loadin ...

  4. vue搭建骨架屏步骤配置

    1.什么是骨架屏幕? 在页面加载数据之前,有一段空白时间,要么用loading加载,要么就用骨架屏. 在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loa ...

  5. Vue页面骨架屏(二)

    实现思路 参考原文中在构建时使用 Vue 预渲染骨架屏一节介绍的思路,我将骨架屏也看成路由组件,在构建时使用 Vue 预渲染功能,将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点 ...

  6. Vue页面骨架屏(一)

    在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loading图效果,而一些大公司会配置一套服务端渲染的架构来解决这个问题.考虑到ssr所要解决的一系列问题 ...

  7. Skeleton Screen — 骨架屏

    用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代,以优化用户体验. Sk ...

  8. vue-skeleton-webpack-plugin骨架屏与page-skeleton-webpack-plugin骨架屏生成插件

    vue-skeleton-webpack-plugin与page-skeleton-webpack-plugin使用 插件github地址:https://github.com/lavas-proje ...

  9. bootstrap-全局css样式

    bootstrap-全局css样式   1.bootstrap是一个前端框架 2.基本模板:viewport视口可以解决移动端设备网页自适应问题 3.版心(.container)  流式版心(.con ...

随机推荐

  1. Luogu P2754 星际转移问题

    Luogu P2754 星际转移问题 思路 首先,对于地球能否到达月球的问题,考虑使用并查集维护. 对于每艘飞船能够到达的站点,放进一个集合里,若两艘飞船的集合有交集,那么就合并两个集合,最后只要地球 ...

  2. C语言:进制转化

    16进制数4321转10进制:原来方法 =4*16^3+3*16^2+2*16^1+1*16^0 =4*16^3+3*16^2+2*16^1+1 =16*(4*16^2+3*16^1+2)+1 =16 ...

  3. 学前端的第一门语言HTML

    学前端最终要做的就是制作各种各样的网页,html就相当于网页的骨架,所以我们学习前端的第一步就是先学html,接下来学习什么是html. 什么是HTML? HTML指的是超文本标记语言(Hyper T ...

  4. IDEA搭建springmvc环境之后无故出现404

    其实这应该是IDEA的自身问题 打开项目结构

  5. VM12升级VM15

    之前一直用的12,现在想要升级为15.主要是为了解决kali操作系统版本兼容问题 打开VM12,点击[帮助]-->[软件更新]--> [检查更新] 发现有VM15,点击[了解详情] VM1 ...

  6. 如何选择数据分析工具?BI工具需要具备哪些功能?

    数据分析使企业能够分析其所有数据(实时,历史,非结构化,结构化,定性),以识别模式并生成洞察力,以告知并在某些情况下使决策自动化,将数据情报与行动联系起来.当今最好的数据分析工具解决方案支持从访问.准 ...

  7. 公有组件ShowCodeList实现原理之一一下拉框的实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Linux的磁盘管理和进程管理(入门)

    查看磁盘使用情况 df :列出文件系统整体的磁盘使用量 增加-h参数可以使得显示的容量更人性化 du:检查磁盘空间使用量---需要进入文件中查看 挂载本地磁盘或文件 mount mount /dev/ ...

  9. 记一次 GitLab 的迁移过程

    目录 1. 迁移背景 2. GitLab 整体架构介绍 3. GitLab 安装 配置选择 安装方式选择 安装的网络区域 安装 GitLab GitLab 常用命令 配置管理员账号密码 4. 配置 G ...

  10. Java架构师-十项全能学习笔记(1)

    Java架构师-十项全能学习笔记(1) @Configuration @EnableStateMachine public class OrderStateMachineConfig extends ...