本文翻译自 Randomness in CSS using trigonometry，作者：Kacper 略有删改在过去，我已经介绍了CSS中使用模运算的伪随机性的主题，我使用素数创建了一个自动计数器，可以用来为每个对象生成不同的值。因此，我们可以独立地计算每个元素的伪随机值。尽管这个解决方案很强大，但它几乎没有缺点：模函数不是连续的它过于复...

本文翻译自 How the CSS :is, :where and :has Pseudo-class Selectors Work，作者：Craig Buckler 略有删改CSS 选择器允许我们按HTML文档中的类型、属性或位置选择元素。本教程介绍了三个新选项:is()、:where()和:has()。

CSS渐变通常用于创建花哨的图案，因此我选择了其中一些仅使用radial-gradient()制作的图案。通过构建它们，我们将了解有关这些渐变的一切。

本文翻译自 How to Center a Div Using CSS Grid，作者：Fimber Elemuwa, Ralph Mason。 略有删改在本文中，我们将介绍使用CSS Grid在水平和垂直方向上居中div的五种方法，当然这些技术可用于任何类型的元素。

CSS 中的颜色格式可以采用不同的表示方式，包括常用的十六进制、RGB、RGBA、HSL 和 HSLA 等格式。十六进制是最常用的格式，使用 6 个十六进制数字来表示颜色，例如 #FF0000 表示红色；RGB 格式使用红、绿、蓝三个颜色通道的数值来表示颜色，例如 rgb(255,0,0) 也表示红色；RGBA 格式在 RGB 的基础上增加了一个透明度通道...

今天要实现的效果如图所示，鼠标悬停是图片卡片会有3D翻转的效果，且动画过程中还带有发光的效果。类似这种3D悬停效果日常看到的比较多，但是今天实现的这个效果有以下几个亮点：

最近看到了一份非常精简但很实用的《Web 界面开发指南》，其中仅有 4 页，却详细阐述了前端交互体验的关键要点。这份指南的思路和方法相当于一个最佳实践，比许多冗长的内容介绍更易于理解。实际上即使没有太多编码经验，也能够轻松地使用这些指南，如果按照这些要点进行开发，相信会让你的项目更加完美，注重细节将使你...

今天逛codepen的时候发现了一个不错的文字动画效果，如此丝滑飘逸的效果必须得研究研究，可以看到字体粗细切换过渡效果很均匀，不像我们平常使用字体时设置 font-weight 的效果，日常设置字重的时候并不是每个值都会生效，只会有几个区间的值是可用的，以下代码给6个p标签设置font-weight 从 100 到 600：

这个夜间模式切换开关效果是不是很炫酷，在短视频曾刷到过是一个国外的设计师看似是为了难为我们前端开发设计了一个元素超多且动画复杂的开关切换效果。

虚线相信大家日常都用的比较多，常见的用法就是使用 border-style 控制不同的样式，比如设置如下边框代码： {代码...} 这将设置顶部的边框样式为点状，右边的边框样式为虚线，底部的边框样式为实线，左边的边框样式为双线。如下图所示：border-style 除了上面所支持的样式还有 groove ridge inset outset 3D相关的样式设...

日常在业务中会经常使用到图片，而涉及到一些大图的加载等待的时间较长，一般为了用户更好的体验，会使用一些不同的图片加载效果，比如以下几种情况：

您是否曾经希望 CSS 中有一种原生能力可以使两行标题在每行字数上保持一致？作为一名设计师，我在设计网站或 UI 时处理不同的内容长度时经常发现这一点。

本文翻译自 What Is CSS @import And Why Can It Slow Down Websites?，略有删改CSS@import可以用来加载其他CSS样式的便捷方式，但是使用它也会使网站的资源呈现变得更慢，导致网站呈现的时间更长。什么是CSS @import？加载CSS文件最常见的方法是使用link标签： {代码...} 另一种方法是在另一个样式表中引用一个样式表，...

作为前端开发者相信肯定有遇到过以下场景：看到一个网站某个模块不错的样式效果想要看CSS代码开发过程中调整样式，如字符溢出，对齐，字体大小颜色之类更改网站数据或样式截图分享在开发过程中，我们通常会遇到需要不断调整代码才能达到预期效果的情况。如果是线上网站的情况，一般会简单粗暴地使用 F12 来查看代码或更...

今天分享一个很有特色的按钮交互效果，保证让你停不下来，原作者是Adam Kuhn，有兴趣的可以去codepen体验，地址：codepen，本文将核心功能逐一讲解，以下是在线效果图：

本文翻译自 A Fancy Hover Effect For Your Avatar，略有删改，有兴趣可以看看原文。你知道当一个人的头像从一个圆圈或洞里伸出来时的那种效果吗？本文将使用一种很简洁的方式实现该悬停效果，可以用在你的头像交互上面。看到了吗？我们将制作一个缩放动画，其中头像部分似乎从它所在的圆圈中钻出来了。是不是很酷呢？接...

不知不觉已经迈入2023年，今年是兔年，想到兔子就会联想到玉兔，中秋，胡萝卜，兔子不吃窝边草，这就越扯越远了，今天的主题是用纯CSS来实现各种不错的文字效果，文字则摘录古诗词中有关《兔》相关的诗词，让我们一边欣赏古诗词的同时一边走进CSS的世界。

本文将继续更新那些炫酷交互效果系列文章，今天带来的是有关 toggle 开关相关的组件。以下是本次文章涉及到的开关组件总览图，总计收集12款不同交互效果，相信总有一款适合你。

基于CSS自定义网格已发布第一部分和第二部分，本文将开始第三部分探讨更多的奇特自定义形状，与之前的文章一样，核心还是基于CSS grid，clip 和 mask来自定义网格形状布局。

四年一度的世界杯正在火热进行中，有没有熬夜看你喜欢的队伍比赛呢。在这欢庆的氛围中，我决定用代码参与一把世界杯，擦边参与，那就是用CSS画一个足球场，正常的用CSS布局肯定是非常easy的，所以决定只用一个div完成，接下来开始正文。

提及噪点效果，首先想到的就是以前的旧电视机信号不稳定时或者画面不稳定时的效果。如果你没有看过那种旧电视，可以看下面的gif动图，真实的情况噪点的变化速度会快很多，这里为了gif的大小，截取的时间较短供参考。

我们最近使用CSS mask属性创建花哨的边框，本文将使用CSS mask和clip-path来切元素的四个角！使用多种技巧可以从任何元素的角切割不同的形状。在本文中，我们将考虑创建独特角落形状的现代技术，同时尝试使用可重用代码，该代码允许我们仅通过调整变量即可产生不同的结果。

在日常开发中肯定都遇到过不少有按钮交互的地方，但你有用到什么炫酷的交互效果吗？日常开发中想必最多的就是点击按钮背景文字变色，阴影，按钮按下，加载中之类的效果，相对都比较平平无奇，都是一些按部就班的效果。一个好的前端页面在实现设计图的同时，如果也有极强的与用户交互效果，那么给用户带来的体验是极好的...

在正常的开发中，我们会遇到很多元素块排列对齐的需求，如九宫格抽奖，多张图片上传后等分布局预览，微信朋友圈多张图片展示等。这都是正常的正方形很规整的布局。

周末浏览codepen时发现一个不错的动画交互效果，如上图所示，有一个多个颜色的嵌套圆形跟随鼠标移动，且和文字形成不同的反差色，交互效果给人眼前一亮的感觉，本文将展开说明其实现过程。