如图所示这是一个纯本文时钟效果，和传统的时钟不一样，没有表盘，也没有完整到每一分钟的数字表示当前时刻。在这个时钟中，当前时间通过文本显示，显示的文本时间误差为+/- 4分钟，以明亮的颜色突出显示当前时间，而其余字母则较暗。实际上这是一个实现很复杂的时钟，因为只使用CSS实现，JS只需要获取初始化的时间，如...

如图所示，这是一个文本阴影效果，阴影有多个颜色，鼠标悬停时文本阴影效果消失，文本回到正常的效果。让我们逐步分解代码，看看如何使用纯CSS实现这个效果的。

如上面gif动图所示，这是一个很炫酷的文字动画效果，文字的每个字符呈波浪式的扩散式展开。本次文章将解读如何实现这个炫酷的文字效果。基于以上的截图效果可以分析出以下是本次要实现的主要几点：文案呈圆环状扩散开，扩散的同时文字变小文字之间的间距从中心逐个扩散开，间距变大文案呈圆环状扩散开，扩散的同时文字变...

如图所示，这是一个很炫酷的卡片效果，关键效果在于卡片的边框呈渐变色变化着，在网页中有这样一个卡片相信可以极大的增强用户体验交互。本次文章将解读如何使用纯CSS实现这个炫酷的卡片效果。

在开发中可能有遇到过屏幕录制的需求，无论是教学、演示还是游戏录制，都需要通过屏幕录制来记录和分享内容。一般在App内H5页基于客户端能力实现的较多，现在浏览器中的 MediaRecorder 也提供了这种能力。MediaRecorder 是一种强大的技术，可以在浏览器端实现屏幕录制功能。本文将介绍如何使用JS MediaRecorder 实现屏幕...

Photoshop是我14岁时学会的第一个专业设计应用程序。这是我成为设计师并最终成为前端开发人员的原因之一。正因为如此，我认为看看CSS是如何助力像Photoshop这样的大型应用开发会很有趣。

拥有一个好的背景图案可以使你的网站设计与众不同。多亏了CSS渐变，我们可以使用几行代码创建花哨炫酷的图案。在这篇文章中，我们将学习conic-gradient并使用它来创建不同的CSS图案。

loader组件是网站的重要组成部分。它可以用在许多地方，我们需要显示的内容正在加载中。这样的组件需要尽可能简单，在这篇文章中我们将学习如何使用优化的代码创建不同的CSS加载器。

我们将使用CSS创建一个心形图案。你可能会说：“为什么又一篇关于心形的文章？已经做过很多了！“。我们不会只建立一个心形图案，我们会使用现代的CSS技巧来实现。忘记带有border-radius和rotation的伪元素。我们也将把图像转化为心形图案！

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

如图所示，这是一个杂志封面图的折叠效果，折叠前后的图片内容完全不违和，瞬间对这个图片内容的排版设计很是称赞，但这块不再本次文章的讨论范围，本次文章是要用纯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来切元素的四个角！使用多种技巧可以从任何元素的角切割不同的形状。在本文中，我们将考虑创建独特角落形状的现代技术，同时尝试使用可重用代码，该代码允许我们仅通过调整变量即可产生不同的结果。

基于上次发布的 那些你不知道的炫酷按钮交互效果 反馈比较好，后续将继续收集那些炫酷的交互效果，希望可以给你的项目添砖加瓦，更上一层楼。那些你不知道的炫酷交互效果系列：那些你不知道的炫酷按钮交互效果那些你不知道的炫酷导航交互效果本文带来的炫酷的导航交互效果，一个结构层次清晰的导航是网站必不可少的功能...

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

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