使用 CSS 实现亚克力效果（Acrylic Material），Mac OS的磨砂玻璃效果（Frosted Glass）和 玻璃变形（Glassmorphism)等 UI 效果！

最近我逛热风小程序（一个卖鞋的小程序）时，发现了一个奇特的图片样式。图片的四个圆角是反向的，和常规图片不一样。 思索一番后，我发现想实现这个效果，需要的 CSS 知识还挺多，于是整理这篇文章。

你好，玻璃拟态 玻璃拟态是目前市面上的新风格，越来越受欢迎。 最重要的是使用 ` backdrop-filter: blur(6px);`给元素后面区域添加模糊效果。

虎年 🐅春节将至，本文使用 React+Three.js技术栈，实现趣味3D创意页面。本文主要包括：ShadowMaterial、 MeshPhongMaterial两种基本材质、补间动画等

本文将比较全面细致的梳理一下 CSS 动画的方方面面，针对每个属性用法的讲解及进阶用法的示意，希望能成为一个比较好的从入门到进阶的教程。 CSS 动画介绍及语法 首先，我们来简单介绍一下 CSS 动画

我们在平时编程开发时，除了需要关注技术实现、算法、代码效率等因素之外，更要把所学到的学科知识（如物理学、理论数学等等）灵活应用，毕竟理论和实践相辅相成、密不可分，这无论是对于我们的方案选型、还是技术实践理解都有非常大的帮助。今天就让我们一起来回顾中学物理知识，并灵活运用到惯性滚…

在实际 Web 开发过程中，总会遇到各种各样的布局。有公司同事问我这样一种布局有没有什么好的实现方式，就是一种在活动充值页非常普遍的优惠券效果，如下 首先，碰到这类布局的最佳实现肯定是mask遮罩。关于遮罩，可以看一下CSS3 Mask 安利报告。这里简单介绍一下 这里的遮罩图…

这是一种社交平台的常见需求，比如说在掘金平台中让用户选择感兴趣的标签，通常都是用JS来处理已经选择了的标签数量。今天给出一个css版本： 然后自定义label样式，接着设置CSS计算器。 设置如果文字长度超出指定的宽度，则隐藏超出宽度的内容。 设置文字在一行显示，不能换行。 设…

哪吒人生信条：如果你所学的东西 处于喜欢 才会有强大的动力支撑。 不要害怕做梦，但是呢，也不要光做梦，要做一个实干家，而不是空谈家，求真力行。 html标签是由<>包围的关键词。 html标签通常成对出现，分为标签开头和标签结尾。 有部分标签是没有结束标签的，为单标签…