今天,分享一个实际业务中能够用得上的动画技巧。 巧用逐帧动画,配合补间动画实现一个无限循环的轮播效果,像是这样: 看到上述示意图,有同学不禁会发问,这不是个非常简单的位移动画么? 我们来简单分...
css奇技怪巧
【布局技巧】Flex 布局下居中溢出滚动截断问题
在页面布局中,我们经常会遇到/使用这么一类常见的布局,也就是列表内容水平居中于容器中,像是这样: ul class="g-contaner"> li>li> li>li> ul> ul { width: 500px;...
【进阶知识】CSS 渐变中的颜色空间和色相插值
在 CSS 中,我们可以很轻易的实现一个渐变,比如下面是一个从黄色到蓝色的渐变 background: linear-gradient(to right, yellow, blue) 效果如下 有没有发现有什么问题?🤔 没错,在黄色和蓝色的中间...
关于去除border-image 1像素的细线的方法
CSS3提供了一个border-image的属性,这个属性可以做一些不规则的多边形边框,类似九宫格的切图,非常强大. 但是有个问题,在chrome上面,9宫格会出现一像素的细线.下面直接转一篇文章. border-image诡异...
单标签实现复杂的棋盘布局
最近,有群友问我,他们的一个作业,尽量使用少的标签去实现这样一个象棋布局: 他用了 60 多个标签,而他的同学,只用了 6 个,问我有没有办法尽可能的做到利用更少的标签去完成这个布局效果。 其实,对...
多行文本下的文字渐隐消失术
本文将探讨一下,在多行文本情形下的一些有意思的文字动效。 多行文本,相对于单行文本,场景会复杂一些,但是在实际业务中,多行文本也是非常之多的,但是其效果处理比起单行文本会更困难。 单行与多行文...
今҈天҈真҈是҈热҈化҈了҈~
今天真是太热了,不信你看下面文本 今҈天҈真҈是҈热҈化҈了҈! 微信公众号正文貌似不支持,也可以查看下面截图 相信大家最近都能看到这样“热化了”的标题。那么,这是如何实现的呢?CSS 可以实现类似的...
巧用 transition 实现短视频 APP 点赞动画
在各种短视频界面上,我们经常会看到类似这样的点赞动画: 非常的有意思,有意思的交互会让用户更愿意进行互动。 那么,这么有趣的点赞动画,有没有可能使用纯 CSS 实现呢?那当然是必须的,本文,就将巧...
有意思的方向裁切 overflow: clip
本文将介绍一个新特性,从 Chrome 90 开始,overflow 新增的一个新特性 -- overflow: clip,使用它,轻松地对溢出方向进行控制。 overflow: clip 为何 首先,简单介绍下 overflow: clip 的用法。 overflo...
动画合成小技巧!CSS 实现动感的倒计时效果
介绍一个 CSS 动画合成小技巧。先看效果 Kapture 2022-06-26 at 16.57.42 这是一个非常“动感”的倒计时效果,在一些活动开场中比较常见,分析一下整个动画过程,不难发现,有以下几类动画 数字的变化 ...