抖音logo图片（抖音logo怎么做）

投稿用户 • 2022年8月4日 pm8:32 • 电商推广 • 阅读 79

大家好，我是前端西瓜哥。

今天我像往常一样，打开 Stack Overflow 网站。

Stack Overflow 是一个程序员问答社区，程序员在开发过程中遇到问题时，就会上这个网站找答案，找到后将它们复制粘贴下来，以完成工作。

这次我打开一看，直接眼睛就瞎了。

这是什么抖音滤镜，酷炫界面前的我眼泪流下来（眼睛疼）。

然后我发现网页底部还提供了其他的风格主题，有 Facebook 风、终端风、Windows 3.1 风、顶级机密风、马里奥风等。各位读者可以自行去体验一番，挺有趣的。

不过我还是觉得抖音风格最酷炫，因为它属于那种真正风格化到极致的那种，怎么说，就是那种，对，那种清新脱俗的感觉。

你完全无法正常阅读内容也证明了这点。

说是抖音风格，其实是一种叫做 3D 眼镜 的特殊滤镜效果：将图形分别做不同方向的红色和青色的投影，产生类似看 3D 电影时的屏幕效果，需要戴上 3D 眼镜才能看到立体效果。

3D 眼镜滤镜的实现

我打开浏览器控制台，发现它对文字使用了下面的 CSS 样式。

body.theme-custom.theme-3d h1, body.theme-custom.theme-3d h2, body.theme-custom.theme-3d h3, body.theme-custom.theme-3d h4, body.theme-custom.theme-3d h5, body.theme-custom.theme-3d h6, body.theme-custom.theme-3d p, body.theme-custom.theme-3d a, body.theme-custom.theme-3d li, body.theme-custom.theme-3d span, body.theme-custom.theme-3d label, body.theme-custom.theme-3d button, body.theme-custom.theme-3d div, body.theme-custom.theme-3d input, body.theme-custom.theme-3d select, body.theme-custom.theme-3d textarea, body.theme-custom.theme-3d ::before, body.theme-custom.theme-3d ::after {
    text-overflow: clip;
    letter-spacing: 3px;
    text-shadow: -3px 0 1px cyan, 3px 0 1px red;
}

其中最核心的样式是 text-shadow: -3px 0 1px cyan, 3px 0 1px red;。

-3px 0 1px cyan 在往左 3 px 的位置上，应用模糊半径为 3px 的青色阴影。3px 0 1px red 则是向右的红色，最终让文字产生一红一青两道阴影，妥妥的 3D 眼镜效果。

然后用 letter-spacing: 3px; 将原本值为 0 的字距调大一些，这是为了让投影不要重叠在一起，导致视觉效果过于混乱。

最后是 text-overflow: clip; ，在内容区域的极限处截断文本，这个感觉没啥用。

文字我们可以用 text-shadow，但它对图片没有效果。我们再去控制台瞧瞧 Stack Overflow 怎么处理图片的。

body.theme-custom.theme-3d img.s-avatar--image, body.theme-custom.theme-3d .gravatar-wrapper-24, body.theme-custom.theme-3d img {
    filter: grayscale(80%) brightness(1.75) drop-shadow(4px 0 0 red) drop-shadow(-4px 0 0 cyan) !important;
    opacity: .75;
}

这里用了 fiter 属性，依次应用的滤镜效果如下：

grayscale(80%)：灰色值设置为 80%，就是比较接近黑白的那灰色效果。
brightness(1.75)：提高图片亮度。
drop-shadow(4px 0 0 red)：对图片加上右侧的红色投影。这里只能对图片的边缘设置投影，所以图片最好是有边缘的 png 之类的图片。
drop-shadow(-4px 0 0 cyan)：同上，这次是青色。

然后再使用 opacity: .75 降低图片透明度，使其更白一些，以便更好地和其他元素融为一体。

可以看到头像方方正正的 jpg，无法做到很好的红青阴影滤镜效果。

有边缘的 png，效果会更好一些。

一些 svg 和图片 icon，也和图片一样是使用类似的滤镜效果。

body.theme-custom.theme-3d svg, body.theme-custom.theme-3d .icon-bg, body.theme-custom.theme-3d .wmd-button, body.theme-custom.theme-3d input[type=radio], body.theme-custom.theme-3d input[type=checkbox] {
    filter: grayscale(80%) saturate(.1) drop-shadow(-4px 0 0 cyan) drop-shadow(4px 0 0 red);
}

应用到自己的网站

我试着将这些样式应用到我个人博客网站，看看效果怎样。

好嘛，挺阴间的。算了算了。

最后

要实现简单的 3D 眼镜效果，其实没有想象的那么困难，只要使用 text-shadow、filter 给我们的元素加上红色和青色的投影就大差不差了。

创业项目群，学习操作 18个小项目，添加微信：80709525 备注：小项目！

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 sumchina520@foxmail.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.vsaren.cn/7163.html

抖音logo图片（抖音logo怎么做）

3D 眼镜滤镜的实现

应用到自己的网站

最后

相关推荐