三行CSS代码把网页像素化

最近在网上逛，突然发现Element-plus官网的效果非常"fashion"。

顶部导航栏区域在页面滚动的时候，所有经过导航栏区域的内容都会变成像 "像素画" 一样，效果非常有意思。

我用CSS复刻了一下这个效果，后面简单分析一下原理。

示例代码：

<template>
    <div class="wrap">
        <el-switch v-model="isPixel" active-text="像素" inactive-text="正常">切换</el-switch>
        <div style="display: flex;align-items: center">
            <div style="width: 80px">渐变：</div><el-slider v-model="gradient" max="10" :disabled="!isPixel" />
        </div>
        <div style="display: flex;align-items: center">
            <div style="width: 80px">大小：</div><el-slider v-model="size" max="10" :disabled="!isPixel" />
        </div>
        <div style="display: flex;align-items: center">
            <div style="width: 80px">模糊：</div><el-slider v-model="drop" max="10" :disabled="!isPixel" />
        </div>

        <div class="content">
            <div class="pixel" :style="pixelStyle"></div>
            <el-image style="width: 300px;" src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg" lazy />
        </div>
    </div>
</template>

<script>
export default {
    name: 'PixelStyle',
    data() {
        return {
            isPixel: false,
            gradient: 1,
            size: 4,
            drop: 4,
        }
    },
    computed: {
        pixelStyle() {
            if(this.isPixel) {
                return {
                    backgroundImage: `radial-gradient(transparent ${this.gradient}px, #fff ${this.gradient}px)`,
                    backgroundSize: `${this.size}px ${this.size}px`,
                    backdropFilter: `blur(${this.drop}px)`,
                }
            }else {
                return {}
            }
        }
    }
}
</script>

<style scoped>
.wrap {
    width: 340px;
    margin: 0 auto;
    border: 1px solid #ddd;
    padding: 20px;
    box-sizing: border-box;
}

.content {
    width: 300px;
    position: relative;
}

.pixel {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 200px;
    z-index: 99;
}
</style>

原理：

本质上就是先在图片上盖上一层模糊层(backdrop-filter)，然后设置"模糊层"的背景图为一个个径向渐变的颜色块，并且设置一下大小。

这样图片部分被遮挡住，还有部分露出来，在人视觉效果中感觉就像是像素画。