文章关键字 ‘animation’

使用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单位和他又有什么千丝万缕的关系呢?

阅读全文…

小tips: CSS或JS实现gif动态图片的停止与播放

2015年12月5日,星期六

如题,本文介绍如何使用CSS或者JS等前端方法实现代码控制gif图片的暂停或者播放。一如既往,有demo有截图还有必要的源代码展示,更关键的是,本文gif比较多……

阅读全文…

再说CSS3 animation实现点点点loading动画

2014年12月28日,星期日

以前介绍过一种方法实现打点loading动画效果,但是那个方法不健壮,机缘巧合,让我重新思考有没有更好的方法。而本文分享的就是自己想到了2个全新的实现方法,兼容各大小浏览器。

本文不仅有demo,源代码展示,还特意制作了多种gif效果演示帮助理解,相信本文的内容会对你的工作有所帮助的!

阅读全文…

超级强大的SVG SMIL animation动画详解

2014年08月31日,星期日

本文详细介绍SVG SMIL animation动画。前半部分主要是效果体验,后半部分只要是参数示意。一定是目前国内最详尽讲解SVG SMIL animation动画的文章,没有之一。内容扎实,丰富的效果展示,大量的源码示意。相信一定会对您的学习有所帮助的。

阅读全文…

CSS3实现鸡蛋饼饼状图loading等待转转转

2014年04月25日,星期五

今天,要实现一个长任务等待提示效果。然后设计师就把做好的gif效果图给我,就是下面这个,转转转等待提示效果。按照大众做法,我应该是把图片直接按图索骥,调调布局,然后早早回家抱老婆。
但是,我这个人,天生不安分守己。想到是用在客户端,客户端又是用的webkit内核,于是,立马决定使用CSS3来折腾一番……

阅读全文…