vite项目的logo效果是怎么做出来的

不知道大家有没有注意过 vite 初始化完成以后的，首页上有两个图标。

一个是 vite 的logo，一个是 vue 的logo。(使用vue创建的项目)

这种淡淡的荧光效果非常不错，一开始我以为是 box-show 实现的，后来看源码发现并不是，而是用了 css 中的 filter: drop-shadow( )。

filter

filter是在 css3 中新增加的属性用于对元素应用图形效果（如模糊、颜色偏移等），通常用于图像、背景或边框的视觉效果处理。它类似于图像编辑软件中的滤镜功能。(灵感或许真的来自photoshop)

用法

element {
  filter: <filter-function> | none;
}

高斯模糊: blur(radius)

<template>
    <div class="filter-box-container">
        <div class="filter-box">滤镜盒子</div>
    </div>
</template>

<script>
    export default {
        name: 'FilterBox'
    }
</script>

<style scoped>
    .filter-box-container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .filter-box {
        width: 200px;
        height: 200px;
        background-color: #41B883;
        border: 1px solid #35495E;
        margin: 40px auto;
        text-align: center;
        line-height: 200px;
    }

    .filter-box:hover {
        filter: blur(2px);
    }
</style>

亮度: brightness(amount)

amount 为百分比，将线性乘法器应用于输入图像，以调整其亮度。值为 0% 将创建全黑图像；值为 100% 会使输入保持不变，其他值是该效果的线性乘数。如果值大于 100% 将使图像更加明亮。

.filter-box:hover {
    filter: brightness(150%);
}

ps: 线性乘法器是指将图像中每个像素的颜色值（通常是 RGB 值）按比例进行放大或缩小。(下文有详解)

对比度: contrast(amount) 【用处不大】

amount 为百分比。值是 0% 将使图像变灰；值是 100%，则无影响；若值超过 100% 将增强对比度。(其他值是该效果的线性乘数)

.filter-box:hover {
    filter: contrast(150%);
}

饱和度: saturate(amount) 【用处不大】

amount 为百分比。值为 0% 将使图像变黑白；值为 100% 则无变化。(其他值是该效果的线性乘数)

.filter-box:hover {
    filter: saturate(150%);
}

透明度: opacity(amount)

amount 为百分比。值为 0% 将使图像完全透明；值为 100% 则无变化。类似于opacity属性。(其他值是该效果的线性乘数)

.filter-box:hover {
    filter: opacity(50%);
}

灰度转换: grayscale(amount)

将图像转换为灰度图。值为 100% 则完全转为灰度图像，若为初始值 0% 则图像无变化。(其他值是该效果的线性乘数)

.filter-box:hover {
    filter: grayscale(50%);
}

色相旋转: hue-rotate(angle) 【用处不大】

旋转图像的色相。angle 为角度，值为 0deg 将无变化。

.filter-box:hover {
    filter: hue-rotate(180deg);
}

反相颜色: invert(amount) 【用处不大】

将图像转换为反色。值为 100% 则完全反转图像，若为初始值 0% 则图像无变化。(其他值是该效果的线性乘数)

.filter-box:hover {
    filter: invert(40%);
}

褐色化: sepia(amount) 【用处不大】

将图像转换为褐色。值为 100% 则完全褐色化图像，若为初始值 0% 则图像无变化。(其他值是该效果的线性乘数)

.filter-box:hover {
    filter: sepia(40%);
}

阴影效果: drop-shadow()

沿图像的轮廓生成阴影效果。阴影语法类似于 box-shadow，但不允许使用 inset 关键字以及 spread 参数。

.filter-box:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
}

组合

filter支持将多个滤镜组合在一起使用，中间以空格分隔。滤镜将按声明顺序依次应用。

.filter-box:hover {
    filter: contrast(175%) brightness(103%);
}