三行CSS代码把网页像素化

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

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

欢迎大家来到IT世界,在知识的湖畔探索吧!

我用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>

欢迎大家来到IT世界,在知识的湖畔探索吧!

原理：

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

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