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

Lightbox without JS, with lazy load

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 4403
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@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;
}

HTML

Lightbox without JS, with lazy load

编辑器支持Emmet

快捷键

Lightbox without JS, with lazy load

使用CSS3弹性框（Flexbox）实现的标签栏控件

使用CSS3 steps方法实现的3个经典加载动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：