.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. [期望DP][纪中]【2010集训队出题】彩色圆环

    彩色圆环 感谢名单 十分感谢 JA_Ma 为我讲解了 \(T1\) 的 期望DP 的思想和推论. 十分感谢 SSL_LYF 为我解答了 \(T1\) 的 期望DP 的概率的大小问题. 十分感谢 SSL ...

  2. Java | 变量 & 常量

    变量 Java是一种强类型语言,每个变量都必须声明其数据类型,变量本质上就是代表一个"可操作的存储的空间",在定义之后空间位置是确定的,但是里面放置什么值是不确定的,我们操作的时候 ...

  3. 「CF1438D」 Powerful Ksenia

    「CF1438D」 Powerful Ksenia 题目大意 给定 \(n\) 个正整数,你可以任选三个数 \(a_i,a_j,a_k\),使这三个数都变为 \(a_i\oplus a_j\oplus ...

  4. YAOI Round #5 题解

    前言 比赛链接: Div.1 : http://47.110.12.131:9016/contest/13 Div.2 : http://47.110.12.131:9016/contest/12 D ...

  5. C语言:随机数

    在实际编程中,我们经常需要生成随机数,例如,贪吃蛇游戏中在随机的位置出现食物,扑克牌游戏中随机发牌.在C语言中,我们一般使用 <stdlib.h> 头文件中的 rand() 函数来生成随机 ...

  6. 详解API Gateway流控实现,揭开ROMA平台高性能秒级流控的技术细节

    摘要:ROMA平台的核心系统ROMA Connect源自华为流程IT的集成平台,在华为内部有超过15年的企业业务集成经验. 本文分享自华为云社区<ROMA集成关键技术(1)-API流控技术详解& ...

  7. ubuntu18.04aliyun

    deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse deb-src http://mirr ...

  8. windows使用nvm管理node不同版本

    最近项目需要升级,新技术需要的node版本较高,而新node不兼容旧版本node,而原项目仍需要继续维护,所以就需要在本地有多个版本的node,基本原理是在环境配置中修改系统变量node的版本文件夹路 ...

  9. P2490 [SDOI2011]黑白棋

    P2490 [SDOI2011]黑白棋 题意 一个 \(1*n\) 的棋盘上,A 可以移动白色棋子,B 可以移动黑色的棋子,其中白色不能往左,黑色不能往右.他们每次操作可以移动 1 到 \(d\) 个 ...

  10. PhotoShop CC2015(64位)下载链接和破解教程

    photoshop如今有cc和cs两种版本,之前出了一个cs的破解教程和扣圆形图,有很多朋友说cc比cs好用的多,希望出个cc的下载链接和破解教程,故推出2015pscc版破解教程和下载链接. 百度云 ...