文章关键字 ‘animation’

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

2018年06月11日,星期一

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

阅读全文…

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

2018年05月31日,星期四

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

阅读全文…

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

2018年05月16日,星期三

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

阅读全文…

Web Animations API与动态特性动画实现

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演示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

如何使用Tween.js各类原生动画运动缓动算法

2016年12月19日,星期一

Tween.js是一个包含各种经典动画算法的JS资源,之前在多篇文章有提到过,AS中甚至有专门的Tween类,但是之前仅仅是提一下,并未详细介绍如何使用,这里,就是专门介绍Tween类中各种算法如何使用,如何应用与实际,以及分享下基于Tween.js写的一个更简单易懂更容易调用的animation.js,希望本文的内容能够对大家的学习有所帮助。

阅读全文…

CSS content换行技术实现字符animation loading效果

2016年11月13日,星期日

CSS content字符生成配合CSS3 animation可以各类字符loading效果实现,一起过来看看眼界,学习学习新的实现思路吧~~

阅读全文…

巧用浏览器CSS属性值的不兼容向下兼容hack技巧

2016年10月25日,星期二

CSS3中有很多好的特性,例如box-shadow盒阴影,但是,唯一的问题是IE8浏览器不支持,如果是对外的PC站点,则IE8浏览器不可不顾,尤其一些受众广泛的网站。

怎么办呢?我的做法往往是这样,IE9+浏览器使用box-shadow阴影,而IE7,IE8浏览器使用border线框。

我们一般采用一些CSS hack技巧,例如使用:root伪类,从功能上满足了我们的开发需求,但提高了我们的CSS权重,很容易增加我们CSS代码的复杂度,那有没有更好的实现呢?

阅读全文…

从height:100%不支持聊聊CSS中的“死循环”

2016年09月16日,星期五

大家应该都知道,如果元素没有格式化的高度值,子元素的height百分比高度是不起作用的,常见的就是height:100%无效,而宽度就没有此问题,所以,新人经常会提出的一个问题是:“为何我的div设置了height:100%却没有效果?”

不知道大家有没有思考过这样一个问题。

然后,有同行就提出了这么一个看似很合理的解释,就是,“假如父元素height:auto且没有其他格式化高度,子元素支持height:100%,则很可能会出现高度死循环”。

看似合理,实际上这种解释是表面的,错误的……

阅读全文…

等宽字体在web布局中应用以及CSS3 ch单位嘿嘿

2016年07月9日,星期六

所谓等宽字体,一般是针对英文字体而言的。东亚字体,据我所知,应该都是等宽的,就是每个字符在同等size下占据的宽度是一样的。但是英文字体就不一定了,就难本文来说,我下面写一个单词,什么呢,就iMac吧,大家打开自己的像素眼,就会很明显地发现这个字符’i’要不其他字符,例如’M’占据的宽度要小.但是,如果是等宽字体,宽度就一样,那么这种表现在web布局中有没有什么作用呢?还有CSS3 ch单位和他又有什么千丝万缕的关系呢?

阅读全文…