CSS3 穿孔箔 - 踏得网

Perforated foil 通过CSS3过滤器实现图片穿孔效果。

CSS3,filter

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #000;
    font-family: monospace;
}
.grid,
.image,
.border {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.border {
    border: 40px solid #000;
    padding: 20px;
    color: #000;
    font-size: 24px;
    text-shadow: 1px 0 0 #FFF, -1px 0 #FFF, 0 1px 0 #FFF, 0 -1px 0 #FFF, 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF;
}
.image {
    background: #000 url(http://upload.wikimedia.org/wikipedia/commons/2/2f/G%C3%BCnz6.jpg) center no-repeat;
}
.grid {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAZBAMAAAAYgrnCAAAAA3NCSVQICAjb4U/gAAAAGFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAABcYkG9AAAACHRSTlMA/0TdEXeZZn00UBIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAGHRFWHRDcmVhdGlvbiBUaW1lADI4LjAzLjIwMTMBvZfUAAAAXElEQVQImWMQBAMBBnVDICWmwMDAJigoDKQYGAwFRUAUQ6FgAJhWFFRAoWHiUHVQfTBzYOYiaFOlYBAt5sDAkgikTYB6nIE0yBBWIA0ylAmJhonD1MH0wcxBNR8AMXgNrx3BetEAAAAASUVORK5CYII=);
    -webkit-transition
}
.container .image {
    -webkit-filter: blur(5px);
    -webkit-transition: -webkit-filter linear 1s;
}
.container .grid {
    -webkit-filter: blur(0px);
    -webkit-transition: -webkit-filter linear 1s;
}
.container.focus .image {
    -webkit-filter: blur(0px);
}
.container.focus .grid {
    -webkit-filter: blur(5px);
}

HTML

Perforated foil 通过CSS3过滤器实现图片穿孔效果。

CSS3,filter

编辑器支持Emmet

快捷键

Perforated foil 通过CSS3过滤器实现图片穿孔效果。

CSS3,filter

CSS3+JS 脸跟着鱼转的北极熊动画

CSS3 行星运转轨道演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：