文档章节

类似懒加载

clearloveing502
 clearloveing502
发布于 2016/12/03 19:20
字数 261
阅读 3
收藏 0

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dome</title> <style> body{ width:640px; margin:0 auto; background-color:#fff; } @keyframes placeHolderShimmer{ 0%{ background-position: -640px 0 } 100%{ background-position: 640px 0 } } .box { animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: placeHolderShimmer; animation-timing-function: linear; background: #f6f7f8; background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); background-size: 800px 104px; position: relative; height:100vh; } [class^="box-"]{ position:absolute; background-color:#fff; } .box-bar-0{ left:60px; top:0; width:10px; height:50px; } .box-bar-1{ left:60px; top:0; width:calc(100% - 50px); height:20px; } .box-bar-2{ left:60px; top:calc(60px - 25px); width:calc(100% - 50px); height:20px; } .box-bar-3{ right: 0; top: 20px; width: 25%; height: 16px; } .box-bar-4{ left: 0; top: 50px; width: 100%; height: 16px; } .box-bar-5{ left: 110px; top: 66px; width: 20px; height: 132px; } .box-bar-6{ left: 110px; top: 86px; width: calc(100% - 110px); height: 10px; } .box-bar-7{ left: 220px; top: 98px; width: 300px; height: 10px; } .box-bar-8{ left: 110px; top: 110px; width: calc(100% - 110px); height: 48px; } .box-bar-9{ left: 272px; top: 166px; width: calc(100% - 110px); height: 12px; } .box-bar-10{ left: 272px; top: 184px; width: calc(100% - 110px); height: 12px; } </style> </head> <body> <div class="box"> <div class="box-bar-0"></div> <div class="box-bar-1"></div> <div class="box-bar-2"></div> <div class="box-bar-3"></div> <div class="box-bar-4"></div> <div class="box-bar-5"></div> <div class="box-bar-6"></div> <div class="box-bar-7"></div> <div class="box-bar-8"></div> <div class="box-bar-9"></div> <div class="box-bar-10"></div> </div> </body> </html>

© 著作权归作者所有

共有 人打赏支持
clearloveing502
粉丝 0
博文 10
码字总数 4926
作品 0
西安
swift懒加载(lazy load)VS OC懒加载

懒加载可以让你不用关心变量的创建时机,等到真正使用的时候才去创建并且能保证在使用的时候已经初始化完毕,在一定程度上可以提高性能。 OC懒加载的原理: 重写变量的 getter 方法,在gette...

zh_iOS
2016/12/29
0
0
基于文本图形的文本搜索工具 - Ncgrep

Ncgrep 基于文本图形(ncurses)的文本搜索工具 背景 作为一个 VIM 党,日常工作开发中,会经常利用 grep 进行关键词搜索,以快速定位到文件。如图: 利用 grep 进行文本搜索 但是,这一过程...

GenialX
2017/12/05
86
0
hibernate之xml映射文件关系维护,懒加载,级联

一:关系维护   --->inverse默认值false,表示不放弃关系的维护。   --->inverse="true"配置在那一端,表示那一端xml对应的po放弃关系的维护(交由hibernate内部进行维护),由另一端进行...

无信不立
2014/08/25
0
0
Vue插件开发初体验——(懒加载)

Vue插件开发初体验——(懒加载) 前言 闲来无事,想自己开发一个简单的Vue懒加载插件,能力的提升我觉得是可以通过编写插件实现,研究了一下官网的Vue插件编写。马上自己独立开始编写懒加载...

唐益达
07/03
0
0
「前端」webp图片适配流量优化

本文来自尚妆前端团队南洋 发表于尚妆博客,欢迎订阅。 图片流量优化 刷新一个页面消耗的流量除了脚本样式文件以外,大头其实在下载的图片。一张图片动辄几十kb,想尽办法优化样式、脚本文件...

尚妆产品技术刊读
2017/02/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
今天
2
0
OSChina 周五乱弹 —— 想不想把92年的萝莉退货

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @罗马的王:分享松澤由美的单曲《地球ぎ》 很久没看圣斗士星矢了 《地球ぎ》- 松澤由美 手机党少年们想听歌,请使劲儿戳(这里) @开源中国首...

小小编辑
今天
12
1
springBoot条件配置

本篇介绍下,如何通过springboot的条件配置,控制Bean的创建 介绍下开发环境 JDK版本1.8 springboot版本是1.5.2 开发工具为 intellij idea(2018.2) 开发环境为 15款MacBook Pro 前言 很多时候,...

贺小五
今天
1
0
javascript source map 的使用

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大...

粒子数反转
昨天
1
0
谈谈如何学Linux和它在如今社会的影响

昨天,还在农耕脑力社会,今天已经人工智能技术、大数据、信息技术的科技社会了,高速开展并迅速浸透到当今科技社会的各个方面,Linux日益成为人们信息时代的到来,更加考验我们对信息的处理程...

linux-tao
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部