CSS 快速实现烟花绽放🎆

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

CSS filter 生成不规则边框

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

CSS sticky实现返回顶部

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

CSS 实现Chrome标签栏的技巧

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

CSS 计数器实现九宫格自动提示超出数量

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

CSS 自动显示“全文”链接

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

CSS 弹性浮动布局应用

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

CSS 实现支持渐变的提示框(tooltips)

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

CSS 文本超出提示效果

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

CSS 实现多行文本“展开收起”

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

CSS 优惠券在线生成工具

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

CSS 实现优惠券的技巧

2021-03-30
阅读 10 分钟
8.9k
在实际 Web 开发过程中,总会遇到各种各样的布局。有公司同事问我这样一种布局有没有什么好的实现方式,就是一种在活动充值页非常普遍的优惠券效果,如下
封面图

使用svg描边来实现移动端1px

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

CSS实现一个粒子动效的按钮

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

探索CSS单行文字居中,多行文字居左的实现方式

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

CSS实现自适应分隔线的N种方法

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

如何更好的去除谷歌浏览器中input自动填充背景?

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

实现一个美化原生拖拽的draggable-polyfill

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

纯手工打造的日期选择器 xy-date-picker 原理与使用

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

一个还算实用的分页组件:xy-pagination

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

基于原生JS验证表单组件:xy-form

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

小而美的颜色选择器:xy-color-picker

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

简单实用的原生img替换方案:xy-img

2019-07-22
阅读 4 分钟
4.1k
原生img的痛点 最近,xy-ui新增了一类组件xy-img,主要目的是为了代替原生img标签,解决了原生img在使用时通常会用一些问题 加载失败的默认显示 无法直接设置图片比例 无法懒加载(最新chrome可能支持,不完善) 无法点击查看大图 下面来看实际使用: 建议查看原文,可以实时交互 使用方式 使用方式很简单 {代码...} 或...

面向未来的Web Components UI组件库

2019-07-09
阅读 4 分钟
8.3k
xy-ui xy-ui是一套使用原生Web Components规范开发的跨框架UI组件库。查看文档 风格参考Ant Design、Metiral Design。 github项目地址 文档 该文档基于docsify动态创建,文中所有组件均为可交互实例。 现集成gitalk评论系统,有相关问题可在下方评论区留言。 特性 跨框架。无论是react、vue还是原生项目均可使用。 组件...

借助CSS来管理js事件

2019-05-30
阅读 6 分钟
4.2k
CSS是一门很神奇的语言,很多和它不相干的功能却能起到很显著的效果,有些在js看起来实现都有一定的工作量,CSS一句属性就能轻而易举的解决,下面来看几个例子(主要和js事件相关)。

CSS 关于多级菜单的内边距的处理方式

2019-05-22
阅读 5 分钟
4.2k
原文地址,排版效果更好 [链接] [链接] 在平时的项目中会经常碰到这样一种布局,暂且称之为多级菜单吧 (截图来自于ant-design) 这类布局也很容易,大概就是这样ul和li嵌套,如下 {代码...} 于是就得到下面一个很原始的样式。 再经过简单的修饰就可以达到上面的效果了。 当然,这个很容易,一般情况下我们是通过设置内...

CSS3 中关于 *-of-type 和 *-child的差异性及适用场景

2019-05-20
阅读 4 分钟
3.1k
:first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:last-child

css3元素出现动画实例

2019-04-16
阅读 4 分钟
12.3k
css3中实现动画一般有两种方式,一个是transition过渡,一个是animation动画。最主要区别就是transition需要条件触发,通常会用hover来触发,而animation则更灵活,可以自动播放,也可以通过条件触发。

做一个好看的红白机模拟器

2019-03-18
阅读 2 分钟
5k
这是一个纯css实现的红白机模拟器,没有使用到任何图片,如下图所示 同时支持移动端横竖屏模式 竖屏 横屏 项目地址 [链接] 下面对该样式中的疑难点总结一下。 反向圆角 这一部分采用radial-gradient完成 {代码...} 也就是从transparent到#da4a4a的渐变,这里的临界值没有完全重叠,重叠会在谷歌浏览器产生一个很明显的锯...

面向键盘操作的半自动化解决方案

2019-02-28
阅读 3 分钟
3.2k
项目地址 [链接] 概要 这是一个半自动化的键盘访问解决方案,主要适用于需要完全键盘操作场景,比如大屏展示,电视,游戏菜单等,大大简化按键操作的逻辑。 焦点使用虚拟焦点,也就是通过添加.focus等class实现,而不是原生自带的:focus,更利于定制化需求。 基于HTML页面。 比较冷门,键盘交互方向,不感兴趣的可以跳过...