骨架屏css样式
.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样式的更多相关文章
- Vue 项目骨架屏注入与实践
作为与用户联系最为密切的前端开发者,用户体验是最值得关注的问题.关于页面loading状态的展示,主流的主要有loading图和进度条两种.除此之外,越来越多的APP采用了“骨架屏”的方式去展示未加载 ...
- Vue项目骨架屏注入实践
相比于早些年前后端代码紧密耦合.后端工程师还得写前端代码的时代,如今已发展到前后端分离,这种开发方式大大提升了前后端项目的可维护性与开发效率,让前后端工程师关注于自己的主业.然而在带来便利的同时,也带 ...
- 微信小程序 - 深度定义骨架屏(提示)
此举每个页面必须创建对应的css样式,比较麻烦(但非常准确),推荐使用组件化的skeleton组件 原理很简单:知晓一下this.setData原理,就OK了,可能大家会因此了解到全屏加载loadin ...
- vue搭建骨架屏步骤配置
1.什么是骨架屏幕? 在页面加载数据之前,有一段空白时间,要么用loading加载,要么就用骨架屏. 在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loa ...
- Vue页面骨架屏(二)
实现思路 参考原文中在构建时使用 Vue 预渲染骨架屏一节介绍的思路,我将骨架屏也看成路由组件,在构建时使用 Vue 预渲染功能,将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点 ...
- Vue页面骨架屏(一)
在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loading图效果,而一些大公司会配置一套服务端渲染的架构来解决这个问题.考虑到ssr所要解决的一系列问题 ...
- Skeleton Screen — 骨架屏
用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代,以优化用户体验. Sk ...
- vue-skeleton-webpack-plugin骨架屏与page-skeleton-webpack-plugin骨架屏生成插件
vue-skeleton-webpack-plugin与page-skeleton-webpack-plugin使用 插件github地址:https://github.com/lavas-proje ...
- bootstrap-全局css样式
bootstrap-全局css样式 1.bootstrap是一个前端框架 2.基本模板:viewport视口可以解决移动端设备网页自适应问题 3.版心(.container) 流式版心(.con ...
随机推荐
- Django基础-03篇 操作Django自带的admin后台
1.使用model.py来定义表结构,使用命令同步到数据库 python manage.py makemigrations #生成表结构(py) python manage.py makemigrat ...
- C语言:for语句原理及具体执行过程
#include <stdio.h> int main() { int i,s=0; for(i=1;;i*=2) { s=s+i; if(i%3==0) break; i=i+2; pr ...
- C语言:类型转换
1.自动类型转换:将小范围数据类型转换为大范围的数据类型 2.赋值号两边的数据类型不一致时,会自动将右边的数据类型转换为左边的数据类型.若右边数据的类型级别高,则根据左边变量的长度截取低字节数据部分 ...
- c语言字符串存储方式
#include <stdio.h> // C 语言中,任何数据类型都不可以直接存储一个字符串.那么字符串如何存储? //在 C 语言中,字符串有两种存储方式,一种是通过字符数组存储,另一 ...
- python exec()函数
''' 函数的作用: 动态执行python代码.也就是说exec可以执行复杂的python代码,而不像eval函数那样只能计算一个表达式的值. exec(source, globals=None, l ...
- 基于SSM框架的旅游网站
介绍:spring+springmvc+mybatis三大框架,mysql数据库 功能结构图: 效果截图: 数据库表: CREATE TABLE `t_admin` ( `id` int(11) NO ...
- Vim的操作
记录下vim的快捷键操作: I 进入编辑: Esc 退出编辑: 按ESC键 跳到命令模式,然后::w 保存文件但不退出vi:w file 将修改另外保存到file中,不退出vi:w ...
- Junit测试用例配置Log4j
用Junit测试非常方便,但有时我们想要看日志来方便排除,使用spring+log4j时,用Junit测试看日志很多人都不太会,即如何将Junit与log4j进行整合. 我也是研究了半天,才终于找到了 ...
- 队列Queue:任务间的消息读写,安排起来~
摘要:本文通过分析鸿蒙轻内核队列模块的源码,掌握队列使用上的差异. 本文分享自华为云社区<鸿蒙轻内核M核源码分析系列十三 消息队列Queue>,作者:zhushy . 队列(Queue)是 ...
- vulnhub-DC:2靶机渗透记录
准备工作 在vulnhub官网下载DC:1靶机https://www.vulnhub.com/entry/dc-2,311/ 导入到vmware 打开kali准备进行渗透(ip:192.168.200 ...