Animation

CSS动画

本文是为帮助您入门和熟悉CSS动画而编写的,使用它们来为您带来基于Web的接口以及为艺术带来生命。虽然W3C的CSS动画规范仍在修订中,但是如今它已经有大量的内容可以供我们使用了。对我而言,CSS动画最令人激动的事情之一是,我们可以非常轻松地使用我们已经熟悉的工具来把它们添加进我们的项目中。如果您已经精通HTML和CSS,您就不需要学习新的语言或插件来为您的项目添加动态效果了。HTML和CSS已经足够,这是一个非常大的加分!无论你只是添加一点点引人注目的设计细节,还是添加非常多的动画,都没有问题。

纯CSS写的小雨打在窗户上效果

华灯初上,窗外的雨淅淅沥沥飘打在窗户的玻璃之上。站在室内的你,望着雨中的夜色,是不是让你增添几分惆帐。似乎如此的场景只有在诗中才会出现。那么今天我们一起来用CSS技术来描绘这样的一个场景。这里仅是用CSS技术来演示这样的一个场景,可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果,将使用到HAMLSass

使用CSS画个大白(●—●)

这一次我们将使用CSS来画个超能陆战队里面大白的头像。我们的做法是在一个元素上,使用CSS动态改变背景图的位置,并且加上一些线性效果。

Twitter上的点赞动画

推特最近更新了他们的点赞按钮,使用了全新的动画,而这个动画使用一组动画来实现的而不是依赖于CSS的 transitions。今天使用CSS动画的steps方法来重建这个动画。

WWDC 2015动画效果

每年,苹果都会召开一次重大的会议。WWDC(苹果开发者大会)是iOS开发者和OSX开发者学习苹果先进高科技和移动设备与桌面软件新概念的好机会。每一年的这个时候,他们都会制造出很多新创意,今年,我被一个用简单圆圈和形状制作出来的图标所惊艳,于是我决定用HTML和CSS来实现它。

滚动条触发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代码功能还是有点蛋疼,像我一样,还有部分没理解。喜欢的就往下看吧。

页面

返回顶部