Animation

滚动条触发CSS3动画

在这篇教程中,我将为你介绍如何在页面滚动时触发CSS动画。这种效果使用JavaScript和CSS就能做到。Jeet Grid System website 就是使用这种小技巧的例子,当你向下滚动的时候,CSS的transformanimation就被触发了。想要达到这种目的,有很多Javascript/jQuery 插件可以用,比如WOW,在这篇教程中,我将为你展示如何不适用插件做到这种效果。

6个Hamburger图标动画

我用了CSS和一点JavaScript来演示如何制作Hamburger 图标动画。在前面的文章中,我把我对导航栏菜单(也被成为"Hamburger图标")的动画灵感发布出来。结果收到了不少粉丝的称赞,我先谢谢你们了。我决定在这方面下多点功夫,于是我写了一系列不同的动画实现方式。在这片文章中,你将会看到6个不同"Hamburger"动画的增强版。

CSS3创建加载动画效果

加载动画在网页设计中是很常见的。用户们都希望网页加载又快又流畅而不是盯着屏幕苦等,而加载动画能够在内容加载完成前给用户视觉反馈,从而能够吸引用户而不让他们直接放弃继续浏览你的网站。

[转载]网页动画的十二原则

作为前端的设计师和工程师,我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面的运动过渡效果甚至动画,但我们经常做的东西不会超过这些。动效是一个有助于访客和消费者理解我们设计的强有力工具。这里有些原则能最大限度地应用在我们的工作中。

Flexbox中动画内幕

Flexbox是CSS3中一个重要的而且非常有用的属性,用来制作弹性布局是非常的方便而又强大。自2009年至今, 这个属性的语法规则也是变更多回。对于难度也较其他属性复杂的多,要用好这个属性还是需要花一些力气的。今天看到写了一篇有关于flexbox的动画效果教程《Animating flexboxes: the lowdown》,蛮好理解的,所以花了一天时间译了一下这篇文章,希望对大家的学习有所帮助,里面css部分还是蛮简单的,对于不懂js的同学,要理解里面的js代码功能还是有点蛋疼,像我一样,还有部分没理解。喜欢的就往下看吧。

CSS3制作 Progress Bars

Progress Bar直译过来就是“进度条”,也就是说今天要和大家一起探讨进度条的作方法。我想进度条大家都有看到过,而且还随处可见,他们表示的是某个过程,显示目前完成状态。最常见的是文件的上传和下载,有一个动态的进度条,通过这个进度可的动态变化告诉我们文件上传或下载的完成程度。换而言之,无论在某一个点或一个桌面程序,或者说我们的Web应用程序或,我们都需要使用到进度条的UI制作。那么在这篇文章中,我和大家一起来学习如何使用CSS3的相关属性来创建一个时尚的、动态的进度条,而且还将扩展一部分jQuery代码,让其从0至100%动态完成。

我们首先来看一看下面的DEMO效果:

下面我们针对上面的DEMO来说说其制作过程。

CSS3制作共享工具栏

今天使用CSS3的伪类“:before”和":after"animation等相关属性创建一个简单的共享工具提示栏效果。关键的一点是,我使用最少的HTML标签,以及不使用任何jQuery和javaScript脚本。但兼容性就惨了,这个大家都懂的。所以下面的效果只适合Firefox、Safari、Chrome和Opera浏览器。不过这种效果大家在平时制作中肯定常常使用到。那下面我们一起来看如何制作吧。

目标

使用纯CSS代码实现下面的DEMO效果:

CSS3的Animation制作蝴蝶飞舞

上周六参加WebReBuild上海站活动时,@点头猪分享的《渐近增强——基于CSS3的浏览器分级策略》,里面有一个使用CSS3Animation制作的蝴蝶飞舞的效果特别吸引人。特决定回来尝试一下,但制作出来的效果总是有不同之处,后来经@点头猪的指点和代码分享,终于整明白了怎么回事。

Animate.css

Animate.css是由Dan EdenDaniel Eden使用CSS3animation制作的动画效果的CSS集合。换句话说:Animate.css就是一大堆的很酷,很有趣,而且很炫又能跨浏览器的动画效果样式集锦,你可以直接使用到您的项目中。

要在你的项目中使用,简单的很,就是三步完成:

CSS3 Animation

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation;我们一起学习完了TransformTransition,让我们对元素实现了一些基本的动画效果,这些我想足以让大家激动了一阵子,今天我们趁着这个热劲继续第三个动画属性

页面

返回顶部