使用 CSS 的类似着色器实现的全息效果
熟悉 PS 的都了解,两张图片有多种合并模式,这里使用纯 CSS 实现
.mask {
mix-blend-mode: multiply;
background-image: url(/tower_spec.jpg);
}
.specular {
background-attachment: fixed;
background-image: linear-gradient(180deg, black 20%, #3c5e6d 35%, #f4310e, #f58308 80%, black);
}
示例
<div class="shader">
<img src="tower.jpg" alt="Asakusa at dusk">
<div class="shader__layer specular">
<div class="shader__layer mask"></div>
</div>
</div>
</div>
<style>
.shader {
position: relative;
overflow: hidden;
backface-visibility: hidden; /* to force GPU performance */
}
.shader__layer {
background: black;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: 100%;
background-position: center;
}
.specular {
mix-blend-mode: color-dodge;
background-attachment: fixed;
background-image: linear-gradient(180deg, black 20%, #3c5e6d 35%, #f4310e, #f58308 80%, black);
}
.mask {
mix-blend-mode: multiply;
background-image: url(/tower_spec.jpg);
}
</style>
具体方法参考 https://robbowen.digital/wrote-about/css-blend-mode-shaders/
0
See Also
- 减少使用 JavaScript 的 HTML 和 CSS 技术
- 纯CSS 建立的砖墙布局
- 让pre 里面的内容自动换行的css 兼容各种浏览器
- 雅虎新开源的 CSS 框架 Pure ,比 Bootstrap 轻量
- 类似 twitter 的豆瓣风格的微社区