文章关键字 ‘animation’

使用“变量种子计数器”扩展CSS动画更多可能性

2019年05月17日,星期五

渐变与动画

有些CSS属性,例如background-image渐变不能使用CSS animation动画,那有没有什么办法可以让渐变支持设置动画呢?本文就将介绍我最近研究的一个小成果,可以实现background-image渐变的动画效果。

阅读全文…

CSS实现文字下面波浪线动画效果

2019年04月21日,星期日

波浪线头图占位图

很多人对本站部分链接hover时候出现的波浪线动画很感兴趣,本文就专门介绍相关的技术实现,共介绍两种web前端实现方法,希望可以对感兴趣的人带来帮助。

阅读全文…

小tips: 纯CSS实现打字动画效果

2019年01月10日,星期四

本文主要介绍如何使用CSS实现类似打印机一样的文本打字效果,展示了共两种方法,分别适用于纯中文场景,以及中英文混合场景,这种效果在线简历,或者一些运营活动上比较合适。希望本文内容可以对你的学习有所帮助。

阅读全文…

这回试试使用CSS实现抛物线运动效果

2018年08月11日,星期六

CSS抛物线文章缩略图

差不多5年前,写了篇文章,介绍如何使用JavaScript和抛物线函数实现抛物线运动效果,实际上,纯CSS也是可以实现DOM元素的抛物线运动效果的。究竟如何实现呢?不妨进来一探究竟……

阅读全文…

Canvas中颜色过渡动画效果的实现

2018年07月22日,星期日

canvas颜色过渡处理缩略图

在CSS3中,我们要想实现从A颜色到B颜色的过渡效果,是相当容易的,只要指定起止颜色,配合transition过渡或者animation动画都可以时间我们想要的效果。

但是,在<canvas>中却没有这么简单,因为<canvas>本质上是一个静态画布,要想实现颜色变化,需要JS去不断绘制,实现起来要比CSS实现麻烦很多。再加上颜色值本身就不一定是纯粹的数值,更增加了我们实现的难度。

本文就将通过多个案例,逐步深入,介绍一些在Canvas中的颜色处理技巧,有些技巧说不定会让你大开眼界。

阅读全文…

CSS3 animation属性中的steps功能符深入介绍

2018年06月11日,星期一

steps()有一定的学习难度,很多概念总是搞不清楚,所以本文算是个自我挑战,看看能不能说清楚steps()中的相关概念,方便大家理解与学习。本文有些篇幅,有些深入,如果您时间较紧,可以先马后看。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tips: 点击页面出现富强、民主这类文字动画效果

2018年05月31日,星期四

如何实现点击页面出现富强、民主这类文字动画效果?很简单,复制本文提供的源代码,效果立即就出现了。快进来看看怎么实现的吧?

阅读全文…

纯CSS实现蜡烛、火焰以及熄灭后烟雾效果

2018年05月16日,星期三

本文要展示的效果主要三部分:直立的红烛、跳动的火焰,腾起的烟雾,这三部分都是纯CSS实现的,有兴趣可以看看。

阅读全文…

借助Web Animations API实现JS keyframes动画

2018年03月23日,星期五

用一句话解释Web Animations API就是把CSS3实现的animation动画变成有JS代码实现。

各有优势。CSS3 Animations动画简单,灵活,复用性强,非常适合静态动画效果;Web Animations参数由JS控制,与单个元素绑定,因此非常适合不固定的动态动画效果,例如随机动画……

阅读全文…

使用CSS offset-path让元素沿着不规则路径运动

2017年03月5日,星期日

在web端,要让一个元素按照特定的路径运动,在之前,基本上只能借助于SVG SMIL animation来实现,但是,随着浏览器的发展,CSS代码也能实现这样的功能,本文就将介绍如何使用CSS中的offset-path属性让元素沿着不规则路径运动。有demo有截图还有gif演示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…