文档章节

类似懒加载

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学习记录

我开始熟练使用windbg是从帮助手册开始的,也就是.hh命令。 就像学习windows开发从msdn开始一样,微软的产品虽然不开源,但是文档做的是相当的好。然而那些开源的东西呢?开源的竞争力其实就...

simpower
9分钟前
0
0
学习scala的网站汇总

https://www.codacy.com/blog/how-to-learn-scala/

Littlebox
11分钟前
0
0
配置本地的cloud9开发环境

前言 说到在线IDE开发环境,cloud9是不能绕过的,cloud9支持很多语言,默认支持的就有Node.js,Python,Ruby,PHP,Go,更逆天的是,他还支持数据库,包括MySQL,MongoDB,Redis,SQLite。但...

Kefy
15分钟前
0
0
springcloud应用程序上下文层次结构

如果您从SpringApplication或SpringApplicationBuilder构建应用程序上下文,则将Bootstrap上下文添加为该上下文的父级。这是一个Spring的功能,即子上下文从其父进程继承属性源和配置文件,因...

itcloud
19分钟前
0
0
新程序员最爱的免费资源

简评:国外美女程序员推荐了她自己用过的一些免费资源,对新手比较友好的那种。 原作者 Ali Spittel,是个美女程序员,以下这些资源都是她自己试过的。以下「我」代表 Ali Spittel。 学 HTML...

极光推送
23分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部