Airen的博客

CSS3的Animation制作蝴蝶飞舞

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

Animate.css

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

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

20个CSS实战技巧

前面我在《13个CSS技巧》和《7个不能遗忘的CSS样式》收集了一些实用的CSS技巧,主要是用来处理一些CSS的样式。今天在这篇教程,我依旧收集和整理了一些CSS技巧,其中有一些技巧大家可能已经使用过了,有些可能大家在实际项目中并碰到,另外有一些技巧我也在以前的教程中有单独提出来并做了详细的解说,今天主要是把他们放在一起,方便大家的查阅和学习。这些CSS技巧能帮大家解决一些恼人的问题,从而也能帮大家提高自己CSS方面的技术。别的先不说了,我们一起开始吧。

一、跨浏览器的兼容

浏览器的兼容问题,大家都有碰到过了。兼容问题对于新手来说都是一件棘手的事情。下面的一些hack写法,可能帮你解决浏览器的特定问题。

纯CSS制作的图形效果

今天这个教程中主要和大家一起来探讨和学习:如何使用CSS来制作图形,比如说圆形,半圆形,三角形等。前面有几个教程中都有使用了纯CSS使用border来制作三角形,今天我特意在网上查阅了一下,介绍这样的教程还是蛮多的,因此我也决定整理一份相关教程出来与大家一起分享。最早发现使用border制作三角形是人物Eric Meyer的发现的,但我没有找到Eric Meyer介绍的教程,可相关教程就很多,我在此就不列出来了,我们开始今天的学习之旅吧。

如何工作?

很少会有人意识到,当浏览器绘制的border,会有一个角度的问题。我们就是得用这样的一个技巧来制作三角的效果。我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变其大小来实现不同的效果。我们一起来看一段代码:

13个CSS技巧

大家说CSS很简单,三下五除二就能把CSS拿下,初学时,我也是这么认为的,也是这样给我很大的信心从事这一行,但后面随着相关知识面的提高,我越来越感觉CSS是蛮深的东西,而且越来越觉得自己掌握的CSS还是很薄弱。从而决心要先把CSS这座山头攻下来。大家平时在Web制作中碰到CSS的问题,总会觉得烦人,其实我个人认为最好的解决方案往往都是最简单的。今天在这篇教程中要和大家一起分享CSS的几种小技巧。

7个不能遗忘的CSS样式

今天要给大家介绍七个CSS样式片段,我认为这几个片段对我们项目的制作帮助还是蛮大的,如果你认真看完这篇教程后,我想你会喜欢这几个CSS样式,而且我相信你会马上运用到你即将要制作的下一个项目中,或者说会马上运用到你现在制作的项目中。在具体介绍之前先要告诉大家,这个几CSS样式片段是David WalshPaul IrishHTML5 Boilerplate项目中挖掘出来的。

jQuery制作Tabs

Tabs的效果在Web页面制作中,可以说是随处可见,我也知道有关于这样的教程在网上上相当的多,前面本站在《纯CSS3制作Tabs选项卡》中介绍了纯CSS制作的Tabs,而《CSS3+jQuery制作切角的Tabs》介绍了使用CSS3+jQuery制作Tabs的方法。今天依然要介绍的是使用jQuery来制作Tabs,但这种方法相对来说是简单易于理解的,就算我这样的初学者都能理解。

CSS3美化表格

在Web页面开发中,自从有了<div>的出现,大家就在讨论table。就出现了什么时候?如何使用div,什么时候?如何使用table的争论。虽然争论不少,但最后得出的结论是一致的:当你需要在页面中处理与数据时,table是首选之一。

CSS3实现11种经典的CSS技术

在CSS2中,我们为了达到一定的设计效果,时常都需要添加额外的<div>或使用PNG图片等方法来实现。当CSS3的时代到来之际,我们不应该只局限于这些老技术,我们应该大胆的去尝试一些新技术。今天我们就跟随NettutsVasili的教程《11 Classic CSS Techniques Made Simple with CSS3 》。来学习使用CSS3新技术实现十一种经典的CSS样式效果。

jQuery Plugin: Easy Accordion

学习jQuery有一段时间了,进展甚慢。这段时间反复在学习手风琴的制作,从纯CSS的制作到jQuery的制作,在W3cplus和大家共享了多篇有关于制作手风琴效果的Blog。比如:

页面

返回顶部