文档章节

类似懒加载

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>

© 著作权归作者所有

共有 人打赏支持
上一篇: Web前端入门
clearloveing502
粉丝 0
博文 10
码字总数 4926
作品 0
西安
私信 提问
Hikic 迎来 1.1 更新,懒加载助力网页性能提升

Hikic.js是一款类似JQuery但是有优于JQuery的高性能JS库。 在3月9号,Hikic迎来首次更新,现在就让我们来看看1.1新增了哪些功能: show方法-显示元素 hide方法-隐藏元素 lazyLoad方法-设置懒...

Skyogo
03/09
999
0
Hikic.js 紧急发布1.1-2版本,修复懒加载的3个BUG

Hikic.js是一款类似JQuery但是又优于JQuery的高性能JS库。 同样是3月9号,在Hikic.js刚刚发布1.1版本更新才过去了几个小时,Hikic.js就紧急发布了1.1-2版本以修复刚添加到1.1版本里面的懒加载...

Skyogo
03/09
530
11
swift懒加载(lazy load)VS OC懒加载

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

zh_iOS
2016/12/29
0
0
图片脚本懒加载简易版插件 LazyLoad

工作中需求中经常会用到图片懒加载的功能,这种功能实现起来并不难,但一次性写下来代码量也不会小。 网上类似的插件倒是一大堆,但是功能完善逻辑严谨的体积太大,里面包含了大量根本用不到...

大灰狼的小绵羊哥哥
11/10
0
0
基于文本图形的文本搜索工具 - Ncgrep

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

GenialX
2017/12/05
86
0

没有更多内容

加载失败,请刷新页面

加载更多

127.0.0.1 和 0.0.0.0 地址的区别

1. IP地址分类 1.1 IP地址表示 IP地址由两个部分组成,net-id和host-id,即网络号和主机号。 net-id:表示ip地址所在的网络号。 host-id:表示ip地址所在网络中的某个主机号码。 即: IP-a...

华山猛男
6分钟前
0
0
解决Unknown host 'd29vzk4ow07wi7.cloudfront.net'. You may need to adjust the proxy settings in Gradle.

把 总项目 下的 build.gradle 中的 两个 jcenter() 用 maven{ url ‘http://maven.aliyun.com/nexus/content/groups/public/’} 代替。...

lanyu96
12分钟前
0
0
基于redis的分布式锁

redisson提供了基于redis的分布式锁实现方式,本文就尝试了下锁的使用方式。Redisson同时还为分布式锁提供了异步执行的相关方法,第二节执行介绍。 一、可重入锁验证 同一个jvm里面同一线程的...

noob_chr
20分钟前
3
0
CPU性能过剩提升乏力影响未来行业发展吗?

虽然CPU仍然在不断发展,但是它的性能已经不再仅仅受限于单个处理器类型或制造工艺上了。和过去相比,CPU性能提升的步伐明显放缓了,接下来怎么办,成为横亘在整个行业面前的大问题。 自201...

linux-tao
23分钟前
1
0
设计模式“6”大原则!

面向对象设计原则 概述 对于面向对象软件系统的设计而言,在支持可维护性的同时,提高系统的可复用性是一个至关重要的问题,如何同时提高一个软件系统的可维护性和可复用性是面向对象设计需要...

Java干货分享
39分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部