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

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

button 是平时使用最广泛的一个 HTML 元素了，只要有点击交互的地方都推荐使用这个。但是，仍然有大部分网站使用的还是div，比如某博，所到之处几乎都是 div

通常我们见到的输入框都是宽度固定的，但有时也会碰到自适应内容宽度的，像这样目前我所知道的有两种方式，相信不难找到给普通 div 标签设置 contenteditable="true"，设置 inline-block 以后，就可以自适应内容宽度了将 input 的输入内容同步到一个透明的 div ，父级宽度跟随 div 的宽度，然后设置 input 为绝对定位并...

偶然在某思看到这样一个问题，如何使一个div的部分区域变透明而其他部分模糊掉？，最后实现效果是这样的进一步，还能实现任意形状的镂空效果鼠标经过的地方清晰可见，其他地方则是模糊的。可能一开始无从下手，不要急，可以先从简单的、类似的效果开始，一步一步尝试，一起看看吧。一、普通半透明的效果比如平时开发中碰...

先来看一个很常见的搜索框的交互，大概逻辑如下当输入框有内容才显示清除按钮点击清除按钮输入框会清空当输入框有内容并且处于聚焦情况下才显示搜索结果浮层点击搜索条目后关闭整个搜索结果浮层示意如下看着逻辑好像很多的样子，其实也是可以纯 CSS 实现的，花两三分钟一起看看吧一、输入框清除按钮的交互首先来看原生的...

偶然发现，在某乎热榜页有一个很有意思的布局，这里的标题会制约内容的行数，所以文本超出是"不定行"的。详细规则如下：整个容器高度是固定的，标题和内容总共 3 行标题最多2行，超出省略内容由剩余空间决定，如果标题占2行，则内容超出1行省略；如果标题占1行，则内容超出2行省略是不是很灵（离）活（谱）的交互？可以...

在一些 web 活动页中经常能看到特殊处理的标题文字，比如这样的暂时忽略掉特殊字体，通过设计稿的图层样式可以发现，共有 3 个文字特效，分别是渐变、描边、投影作为一个有追求的前端，当然不会直接用图片啦~ 这里分别用 CSS 和 SVG 两种方式来实现，一起看看吧温馨提示：文章细节较多，不感兴趣的也可以直接跳到底部查...

什么样的场景决定使用什么样的动画。比如一些比较轻量、装饰性的动画，CSS 动画就足够了，而一些对动画要求比较高的运营活动，创意小游戏等，JS 动画肯定是首选，必要情况下还需要借助一些图形库，比如 Pixi.js。

之前做过很多特殊的布局，比如在这两篇文章 CSS 实现优惠券的技巧 、CSS 实现支持渐变的提示框（tooltips），如下但是一直有一个痛点就是：无法给这些图形加上边框今天带来一个小技巧：利用 drop-shadow 一行代码搞定所有不规则边框一、投影这里需要利用投影 drop-shadow， 不太了解的可以参考 这篇文章: 被低估的CSS滤...

经常在某些文档中或者文章中可以看到这样一个"返回顶部"的功能，具体有两个交互只有滚动一定距离才会出现，返回到顶部重新隐藏点击会返回到顶部比如 LuLu UI又是点击的，又是滚动的，看着好像必须要借助 JavaScript 了，其实也可不必，经过我的一番琢磨，仅仅使用一点点 CSS 就能实现这样的交互效果，一起看看吧一、粘性...

这次来看一个带特殊圆角导航栏布局，如下谷歌浏览器的标签栏：这样一个布局如何实现呢？下面介绍几种方法一、伪元素拼接假设有这样一个 HTML 结构 {代码...} 首先可以考虑的一种方式就利用两个伪元素拼接中间的圆角比较容易，左右两边的反向圆角如何实现呢？其实可以想想有哪些可以实现圆形的样式，这里想到了border-rad...

经常在某些 app 中看到这样的九宫格设计。当缩略图不足 9 张时，正常排列，当超过 9 张时，会提示还剩多少张，如下：如何使用纯 CSS 实现这一效果呢？一起来看看吧一、九宫格布局布局就很简单了，一个很普通的九宫格布局，这里使用 grid {代码...} 这里正方形可以用aspect-ratio简易实现，对应的 CSS 如下 {代码...} 效...

那么，有没有办法在不使用 js 的情况下实现呢？我一看就来了兴致，看着好像和之前这篇文章 CSS 实现多行文本“展开收起” (juejin.cn) 有点类似？不过这次的布局要简单的多，交互琢磨了半天发现也是可以完美实现的，并且是完全不一样的思路，一起来看看吧

现在差不多已经是 flex 的天下了，简单灵活，但有时还是不可避免的会接触到 IE 浏览器，比如我最近接触的 阅文作家专区 (qq.com)，这个就是需要兼容 IE9， 也自然不能使用 flex 布局了。不能使用 flex 怎么办（这个项目怎么这么XX，都 2021 年了还要兼容 IE）？那只能回归传统布局方式了，也就是浮动布局。

今天来看一种十分常见的交互：提示框（tooltips）。通常提示框都是纯色的，比如下面这个这类布局实现还不算复杂，可以用一个圆角矩形和一个小三角拼接形成，设置相同的颜色就可以了这个并不是本文的重点，有兴趣的可以访问 css-tips (codepen.io)有时候，为了突出强调产品的特点或者为了跟随设计的潮流，设计会用上渐变...

在 mac 文件管理中有这样一个小细节。当文件名不超过一行时，完整显示，此时鼠标放上去无任何提示当文件名超过一行时，出现省略号，此时鼠标放上去提示显示完整文件名一个很微妙但非常人性化的细节（ps.都能完全看见也就不需要提示了😘）。其实这类效果在 web 中，通过简单的 CSS 也能轻易实现的。下面就来看看吧~一、CSS...

多行文本展开收起是一个很常见的交互， 如下图演示实现这一类布局和交互难点主要有以下几点位于多行文本右下角的“展开收起”按钮“展开”和“收起”两种状态的切换当文本不超过指定行数时，不显示“展开收起”按钮说实话，之前单独看这个布局，即使借助 JavaScript 也不是一件容易的事啊（需要计算文字宽度动态截取文本，vue-cl...

之前发过一篇文章CSS实现优惠券的技巧，主要介绍了几种绘制优惠券的方法，尽管实现已经非常完美、非常灵活，不过还是有很多同学表示"太巧妙了，不过我还是选择切图🤣”为此，专门制作了这样一个在线 CSS 生成工具Coupon.io (codelabo.cn)功能设计首先最上面是几种优惠券的类型，从图标应该能大概看出具体的样式每一种类型...

在实际 Web 开发过程中，总会遇到各种各样的布局。有公司同事问我这样一种布局有没有什么好的实现方式，就是一种在活动充值页非常普遍的优惠券效果，如下

今天介绍一个通过svg来实现移动端1px效果的小技巧svg的描边方式通常我们在使用一些设计软件时，描边会有三种选择，分别是内描边、居中描边和外描边，比如 photoshop那么，svg 中的描边是哪种方式呢？答案是居中描边，并且无法更改，如下 {代码...} 可以看到，rect 的描边是居中的，两边各是 50.5px的实现根据上面的结论...

原文链接[链接] 按钮（button）可能是网页中最常见的组件之一了，大部分都平淡无奇，如果你碰到的是一个这样的按钮，会不会忍不住多点几次呢？ 通常这类效果第一反应可能就是借助canvas了，比如下面这个案例（建议去codepen原链接访问，segmentfault内置的预览js会加载失败） 效果就更加震撼了，当然canvas实现也有一定...

原文链接[链接] 很久以前 刚入前端那会，产品经理提出了这样一个需求 这段文字能不能这样判断一下，当文字不足一行时，让它居中显示，当文字超过一行就让它居左，不然居中显示很奇怪，因为最后一行是吊着的 琢磨了一下，当时我还真按照产品经理的逻辑，通过js判断一下文字的高度，如果超过一行，就添加一个类名，而且这...

分割线是网页中比较常见的一类设计了，比如说知乎的更多回答 这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应 偷偷的看了一下知乎的实现，很显然是用一块白色背景覆盖的，加一点背景就露馅了 心想：知乎的前端也不怎么样？ 可能别人的重点不在这些上面吧 下面列举几种更好的实现方式，不会露馅的那种 1....

input可能是平时网页中使用最多的标签之一了，但凡需要输入的地方都少不了。毕竟输入是一件比较麻烦的事情，所以浏览器也做出了许多便于输入的地方，比方说自动填充

拖拽的实现 在HTML5还未普及之前，实现元素的拖拽还算是一件比较麻烦的事，大概思路就是监听鼠标移动相关事件，下面是伪代码 {代码...} HTML5新增了拖放draggable标准，拖拽就变得简单了，只需要通过监听元素的拖放事件就能实现各种拖放功能。 {代码...} 除了设置draggable="true"属性外，默认情况下img、链接默认是可拖...

可以说是一个经常要用到，很少人会主动去实现的一个组件，毕竟实现起来还是要一定的时间的，所以平时工作之余就可以试着打造一些基础组件库，既可以锻炼自己的基本功，又可以为公司为社区做贡献~

分页组件（有些可能叫做翻页组件）应该是一类比较常见的组件了，适用于数据比较多的情况。比如思否的问答页面： 结构比较简单，通常包括上一页、数字页面、下一页等功能，有些可能还会包含输入指定页码跳转、切换每页条数功能。 xy-pagination xy-pagination是xy-ui新增了一类组件，主要解决分页问题，下面简单介绍一下...

form表单元素大家可能都用到过，除了可以提交表单外，还有一些内置的表单校验，比如require、minlength、maxlength，还有各种类型的input，比如type=email可以校验是否是邮箱类型，如果不满足还可以使用pattern进行正则校验。

html5表单元素input新增了一个color类型，也就是颜色选择器。 {代码...} 该选择器在windows上的默认效果如下： 可以说非常难看并且难用了。 为了解决这个问题，xy-ui新增了一类组件xy-color-picker，效果如下： 设计参考chorme颜色选择器。 是不是从视觉上就提升了一大截呢 下面来看看具体使用。 建议查看文档，可以实时...