你可能不需要 javascript

通常要做一个时钟，肯定离不开 JS 定时器。今天换一种思路，用 CSS 来实现一个时钟，如下： 你也可以访问这个CSS time (codepen.io)查看实际效果 当然借用了一点点 JS 用于初始

很多时候都会碰到字符串补全的需求，典型的例子就时间或者日期中的补零操作，例如 通常的做法是 后来，JS 中出现了原生的补全方法padStart()和padEnd()，如下 其实呢，在 CSS 中也是可

关于原生 input range 滑动输入条如何自定义样式一直都是我心里的一道坎，一般情况下，可以很轻易的美化到这个程度 为什么很容易呢？因为这些都是有对应的伪元素可以修改的 可是，偏偏没有已滑过部分

在 Web 中，大部分按钮可能都是平平无奇的，有时候为了强调品牌特殊或者满足特殊功能，可能需要给按钮添加一点点击动效。比如，用过 Ant Design 的小伙伴应该都能发现，在点击按钮的时候会有一个很

最近项目中 Ant Design 接入比较多，还是非常不错的。不知道大家有没有发现这样的效果，在官网上，如果鼠标放在Logo上，字母i上的图标会不停的变化，离开后停止，放上去重新变化，算得上是一个小彩

通常我们见到的输入框都是宽度固定的，但有时也会碰到自适应内容宽度的。这次带来一个全新的纯 CSS 实现方案，相信能带来不一样的感受！

偶然在某思看到这样一个问题，如何使一个div的部分区域变透明而其他部分模糊掉？，最后实现效果是这样的 进一步，还能实现任意形状的镂空效果 鼠标经过的地方清晰可见，其他地方则是模糊的。 可能一开始无从下

这次来看一个很常见的搜索框的交互，大概逻辑如下 当输入框有内容才显示清除按钮 点击清除按钮输入框会清空 当输入框有内容并且处于聚焦情况下才显示搜索结果浮层 点击搜索条目后关闭整个搜索结果浮层 示意如下

偶然发现，在某乎热榜页有一个很有意思的布局，这里的标题会制约内容的行数，所以文本超出是 "不定行" 的。详细规则如下： 整个容器高度是固定的，标题和内容总共 3 行 标题最多2行，超出省略 内容由剩余

最近项目上需要做一个烟花动画，要求是随机大小，不同地方出现，先看效果 一、选择合适的动画 什么样的场景决定使用什么样的动画。比如一些比较轻量、装饰性的动画，CSS 动画就足够了，而一些对动画要求比较高

纯 CSS 实现，可以在滚动的时候自动显示返回按钮。还算是一个比较实用的小功能，相比 JS 而言，CSS 使用起来简单方便，也无需考虑加载问题，几乎零成本

经常在某些 app 中看到这样的九宫格设计。当缩略图不足 9 张时，正常排列，当超过 9 张时，会提示还剩多少张。 如何使用纯 CSS 实现这一效果呢？一起来看看吧

最近有同事问我这样一个交互，当文本较多时（超出5行），出现“全文”链接，说明有更多的内容，点了之后跳转新页面。那么纯 CSS 如何实现这样一个交互呢

在 mac 文件管理中有这样一个小细节。 当文件名不超过一行时，完整显示，此时鼠标放上去无任何提示 当文件名超过一行时，出现省略号，此时鼠标放上去提示显示完整文件名。一起看看如何实现吧

效果就更加震撼了，当然canvas实现也有一定的门槛，而且实际使用起来也略微麻烦（所有js实现的通病），这里尝试一下CSS的实现方式。 抛开js方案，还有HTML和CSS实现方式。HTML就不用说了，直接写上大量的标签 那么来看看CSS实现方式，主要也是两种方式，其实就是想一下…

一个项目发展到一定的环境或者一开始就是为多国打造的，就需要考虑国际化了。简单来说，就是一套页面，多套语言。 然后，页面所有的官方组件都变成了中文（默认是英文）。 具体使用方式可以自行搜索，无非就是看各种api和配置文件。 其实原理很简单，这里只讲最基本的原理，不谈框架的特性。 …

选择器是CSS中的一大特色，用于选择需要添加样式的元素。 这里只列举了几种，还有很多，不熟悉的可以自行搜索查找。 虽然说CSS选择器有很多种，可以满足绝大部分的需求，不过有时候还是会有一些看似合理，实际上比较棘手的问题。 比如说上面提到了相邻兄弟选择器，不过只能选择后面的兄弟节…

CSS是一门很神奇的语言，很多和它不相干的功能却能起到很显著的效果，有些在js看起来实现都有一定的工作量，CSS一句属性就能轻而易举的解决，下面来看几个例子（主要和js事件相关）。 当然，元素也要设置相应的样式，让它看起来不可点击。 1. disabled 2. pointer…