html 图片缓加载,纯CSS3实现的弹出式窗口（背景图片使用延迟加载技术）

CSS

语言：

CSSSCSS

确定

@charset "UTF-8";

.lbwojs {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

z-index: 1337;

background: rgba(0, 0, 0, 0.75);

opacity: 0;

visibility: hidden;

-webkit-transition: 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);

transition: 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);

}

.lbwojs::before {

position: absolute;

top: 50%;

left: 50%;

z-index: 0;

padding: 0.5em 1em;

background: black;

opacity: 0;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

color: white;

text-transform: uppercase;

content: "loading…";

}

.lbwojs .lbwojs-effect {

position: absolute;

top: 5%;

left: 5%;

right: 5%;

bottom: 5%;

z-index: 1;

opacity: 0;

-webkit-transform: scale(0.8);

-ms-transform: scale(0.8);

transform: scale(0.8);

}

.lbwojs .lbwojs-img-container {

display: none;

}

.lbwojs .lbwojs-img {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: center / contain no-repeat;

}

[data-action="lbwojs"]:focus ~ .lbwojs {

opacity: 1;

visibility: visible;

}

[data-action="lbwojs"]:focus ~ .lbwojs::before {

opacity: 1;

-webkit-transition: opacity 0.75s cubic-bezier(0.075, 0.82, 0.165, 1) 0.25s;

transition: opacity 0.75s cubic-bezier(0.075, 0.82, 0.165, 1) 0.25s;

}

[data-action="lbwojs"]:focus ~ .lbwojs .lbwojs-effect {

opacity: 1;

-webkit-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

-webkit-transition: 0.75s cubic-bezier(0.075, 0.82, 0.165, 1);

transition: 0.75s cubic-bezier(0.075, 0.82, 0.165, 1);

}

[data-action="lbwojs"]:focus ~ .lbwojs .lbwojs-img-container {

display: block;

/* FOR DEMO ----------------------------- */

}

a {

display: block;

width: 350px;

margin: auto;

border: 1em solid rgba(255, 255, 255, 0.25);

-webkit-transition: border-color 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);

transition: border-color 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);

}

a:hover,

a:focus {

border-color: white;

}

a img {

display: block;

width: auto;

max-width: 100%;

/* MISC --------------------------------- */

}

html,

body {

height: 100%;

}

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

background: #3498db;

color: white;

font: 1em/1.4 "lato";

font-weight: 300;

}

a {

color: inherit;

}