澳门新葡亰娱乐官网用CSS3制作50个超棒动画效果教程

介绍

CSS3 ,许多令人振奋的功能将得到实现。
CSS3具有更大的灵活性,并使它更容易地实现复杂的应用。许多省时省力的规则正在为CSS3而制订
:文字阴影,盒大小,不透明度,多背景,边框半径,边框图像,多栏布局等…

CSS3为我们带来了令人惊叹的新特性,而最有趣的就是CSS动画。向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器。(IE浏览器谢绝观赏~)

今天,我们要学习如何使用简单的CSS来创建不同类型的平面图形。

虽然目前只有最先进的浏览器支持的这些效果,但它仍然很有趣!

1.CSS3实现钟表效果(基于jQuery)

  使用CSS3的基本变形特性:rotate,并结合了jQuery这类javaScript框架制作的CSS3时钟效果。
澳门新葡亰娱乐官网 1

使用代码

在此之后,我们将看看一些有趣的CSS3特性
,今天您就可以在自己的网站上付诸实践。

2.模拟时钟

  模拟时钟基于过渡webkit和CSS3变形,javascript用于将其按当前时间转动。
澳门新葡亰娱乐官网 2

矩形

CSS3 Color Module

CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL , CMYK ,HSLA
and RGBA. 。这篇文章详细介绍如何在CSS3中使用这些颜色。
澳门新葡亰娱乐官网 3

3.可使用箭头键旋转的3D立方体

  你可以使用上、下、左、右方向键控制这个3D立方体,它是基于webkit-perspective,
-webkit-transform 和 -webkit-transition 创建。
澳门新葡亰娱乐官网 4

.rectangle{width:250px;height:150px;background-color:#6DC75F;}div/div

Gradient Borders

允许使用渐变边框 -moz-border-radius / -webkit-border.
澳门新葡亰娱乐官网 5

4.多种3D立方体(淡入淡出)

  多种3D立方体使用CSS3和它的属性‘transform’ 和 ‘transition’
,我个人觉得效果很震撼,你能看到写在3D立方体上的透视感极强的文字。
澳门新葡亰娱乐官网 6

三角形

Border Image

正常的CSS边框有时候是不够的。如果需要实用CSS图像边框,CSS3通过支过border-image
and border-corner-image 来实现。
澳门新葡亰娱乐官网 7

5.CSS3手风琴效果

  使用CSS3实现的手风琴菜单效果,基于webkit浏览器专有属性。
澳门新葡亰娱乐官网 8

.triangleUp{border-left:75pxsolidtransparent;border-right:75pxsolidtransparent;border-bottom:150pxsolid#6DC75F;width:0;height:0;}divclass=triangleUp/div

Rounded Corner Boxes

Andy budd告诉我们如何轻松地创建圆角边框border-radius and background
position.
澳门新葡亰娱乐官网 9

6.自动滚动视差效果

  自动滚动视差效果使用WebKit的 CSS transition
属性。该效果无需JavaScript。
澳门新葡亰娱乐官网 10

椭圆形

Box Shadow

CSS3的 box-shadow 允许我们添加阴影效果,而不必在特定的元素上实用图像.
目前只有Safari 3+ and Firefox 3.1 (Alpha) 支持box-shadow.
澳门新葡亰娱乐官网 11

7.Isocube

  Isocube有些类似于3D立方体,但也有不同之处,它可以让他片贴在立方体面。
澳门新葡亰娱乐官网 12

.oval{width:300px;height:150px;background:#6DC75F;-moz-border-radius:150px/75px;-webkit-border-radius:150px/75px;border-radius:150px/75px;}divclass=oval/div

Multiple background Images

如果你想添加多个背景在一个盒子或一个段落,
CSS3允许在一个元素上使用多个背景图像。
澳门新葡亰娱乐官网 13

8.CSS3图片集

澳门新葡亰娱乐官网 14

月牙形

澳门新葡亰娱乐官网 ,Multiple Columns

CSS3模块允许建立多栏文本而不需要表格 -moz-column-count and
-moz-column-width. 如果你的网页上文字过长,这是一个很实用的CSS属性
澳门新葡亰娱乐官网 15

9.CSS3 Matrix(黑客帝国效果)

  黑客帝国是最棒的科幻小说改编电影之一,现在使用纯CSS就能实现电影中的矩阵效果。
澳门新葡亰娱乐官网 16

.moon{width:150px;height:150px;border-radius:50%;box-shadow:15px15px00green;}divclass=moon/div

Text Shadow

文本限影text-shadow 属性允许添加阴影到文字上的每个字母。另外, text-shadow 不是CSS3新有的属性,最初出现在CSS2,但在CSS2.1后移除。
澳门新葡亰娱乐官网 17

10.7种CSS3结合javascript技术的特效

  7种CSS3结合javascript技术的特效实例. 所包含的效果有淡入淡出, 震动,
轻移, 扩大, 跳动, 旋转 和 手风琴效果。
澳门新葡亰娱乐官网 18

树叶

Box-sizing and Box-model

box-sizing可让您指定的行为,浏览器在计算宽度的一个元素和控制改变盒子大小
澳门新葡亰娱乐官网 19

11.各种鼠标悬停图片特效

  六个由CSS3替代JavaScript而实现的鼠标悬停图片效果,CSS3实现这种悬停效果依然很炫!
澳门新葡亰娱乐官网 20

.leaf{border-radius:5px300px3px300px;background:#6DC75F;width:150px;height:150px;}divclass=leaf/div

CSS3 Opacity

虽然,不透明的CSS属性已经有一段时间,当CSS3推出将有更多使用不透明属性。您可以为盒子,图片和文字使用不透明属性设置。
澳门新葡亰娱乐官网 21

12.旋转的可口可乐易拉罐(使用滚动条控制)

澳门新葡亰娱乐官网 22

兴趣点

CSS3 Selectors

CSS3的属性选择器大全
澳门新葡亰娱乐官网 23

13.3D 《宫女》

澳门新葡亰娱乐官网 24

CSS能让你完成很多令人惊艳的事情…祝大家编码愉快!

Brilliant implementations of CSS3 Properties

14.宝利来画廊

  宝利来画廊是由CSS3技术实现的将一些照片堆在一起,有趣的是鼠标悬停照片是,照片会旋转并缓慢放大~
澳门新葡亰娱乐官网 25

Awesome Buttons with CSS3 and RGBA

也许您不会相信,这些按钮只使用了CSS3的属性,而且没有用到任何图像。
澳门新葡亰娱乐官网 26

15.太空

澳门新葡亰娱乐官网 27

Render User Interface Using CSS3

这是CSS3一个创造性的例子 。有模拟的OSX版的用户界面使用CSS3
。点击图片以查看工作演示。
澳门新葡亰娱乐官网 28

16.Mac Dock

  CSS3模拟的mac操作系统菜单…
澳门新葡亰娱乐官网 29

CSS3 Template Layout with jQuery Plugin

此插件允许网页设计师用jQuery实现W3’s CSS 模板布局
澳门新葡亰娱乐官网 30
View Demo

17.Drop-In Modals

澳门新葡亰娱乐官网 31

Using CSS3 RGBA for Transparency

如果您想知道如何实现透明方块的24种方法,本文讨论RGBA让您指定颜色为半透明和如何使用它。
澳门新葡亰娱乐官网 32

18.滑动的唱片

  该效果使用了CSS3过渡和些许HTML,在它上面放一个唱片专辑会看上去更生动。
澳门新葡亰娱乐官网 33

Custom Font with CSS3

虽然有其它方式 嵌入字体,但使用CSS3自定义的字体将容易得多。
澳门新葡亰娱乐官网 34

19.CSS3 Zooming Polaroids

  该效果会将一个照片列表按顺序排列,并把它们按不同的角度旋转,使用了CSS2和CSS3技术,无JavaScript。它从图片的alt属性中读取出照片描述并放到了照片的下方。
澳门新葡亰娱乐官网 35

Creating a Polaroid Photo Viewer with CSS3 and jQuery

网页设计师Marco Kuiper如何使用CSS3和jQuery创建华丽的画廊。
澳门新葡亰娱乐官网 36
View Demo

20.CSS3 火箭动画

澳门新葡亰娱乐官网 37

Example and Use of Box Sizing

讨论如何使用CSS3的 box sizing。
澳门新葡亰娱乐官网 38

21.Poster Circle

澳门新葡亰娱乐官网 39

CSS3 Corporate Fun

这个菜单模仿推悬停按钮使用的CSS选择符。
澳门新葡亰娱乐官网 40

22.变形的立方体

澳门新葡亰娱乐官网 41

CSS3 Links Creation and Usage

CSS3的伪类
澳门新葡亰娱乐官网 42

23.动画版宝丽来画廊

澳门新葡亰娱乐官网 43

Tooltip with CSS3

使用:before (or :after) pseudo element和:hover pseudo
class.创建一个提示
澳门新葡亰娱乐官网 44
View Demo

24.聚光灯下的投影效果

澳门新葡亰娱乐官网 45

Styling Forms with Attribute Selectors

如何使用Web表单样式属性选择符
澳门新葡亰娱乐官网 46

25.色彩鲜艳的时钟

澳门新葡亰娱乐官网 47

CSS Opacity

多种使用CSS透明度的方法。
澳门新葡亰娱乐官网 48

26.Lightbox Gallery

澳门新葡亰娱乐官网 49

Using CSS3 Selectors to Apply Link Icon

使用CSS3选择器添加一个图标在链接旁边。
澳门新葡亰娱乐官网 50

27.弹性缩略图菜单

澳门新葡亰娱乐官网 51

Simple CSS3 rounded Corners with Support for IE

CSS3圆角边框,兼容IE浏览器(IE下使用图片)
澳门新葡亰娱乐官网 52
View Demo

28.Coverflow

澳门新葡亰娱乐官网 53

The Shadow Effect in CSS3

CSS3 属性-webkit-box-shadow在任何特殊DIV上创建阴影.
此DEMO只支持Safari.
澳门新葡亰娱乐官网 54
View Demo

29.jQuery DJ Hero

澳门新葡亰娱乐官网 55

Must Read CSS3 Related Articles :

30.Dynamic Stacking Cards

澳门新葡亰娱乐官网 56

Six Questions: Eric Meyer on CSS3

澳门新葡亰娱乐官网 57

31.另一个CSS3图片画廊效果

澳门新葡亰娱乐官网 58

5 Techniques to Acquaint You With CSS3

澳门新葡亰娱乐官网 59

32.雪堆(使用方向键控制)

澳门新葡亰娱乐官网 60

Push Your Web Design Into The Future With CSS3

澳门新葡亰娱乐官网 61

原文地址:


33.CSS3动画版价格栏

澳门新葡亰娱乐官网 62

34.平滑jQuery+CSS3菜单

澳门新葡亰娱乐官网 63

35.CSS标签(无JavaScript)

澳门新葡亰娱乐官网 64

36.CSS标签菜单(无JavaScript)

澳门新葡亰娱乐官网 65

37.SVG+CSS3鱼眼菜单

澳门新葡亰娱乐官网 66

38.CSS3落叶效果

澳门新葡亰娱乐官网 67

39.CSS3旋转图集效果

澳门新葡亰娱乐官网 68

40.CSS3下拉菜单

澳门新葡亰娱乐官网 69

41.星球大战风格爬行文字(纯HTML+CSS)

澳门新葡亰娱乐官网 70

42.CSS3即时贴

澳门新葡亰娱乐官网 71

43.css3雪花

澳门新葡亰娱乐官网 72

44.又一个鱼眼效果

澳门新葡亰娱乐官网 73

45.CSS3逐帧动画

  第一个CSS3逐帧动画实例需要你持续使用鼠标点击图片,当播放到最后一帧时它会自动播放第一帧,如此循环,但第一个实例只能在FireFox和Opera下实现。第二个Css3逐帧动画实例需要你使用鼠标在图片上移动,依旧是mousemove这个动作,只要鼠标在移动图片动画就会持续播放,但动画的播放速度是与你的鼠标移动速度有关的,该实例支持Safari,
Google Chrome, IE8, Firefox 和 Opera。
澳门新葡亰娱乐官网 74

46.全地域装甲载具

澳门新葡亰娱乐官网 75

47.又一个CSS3手风琴效果

澳门新葡亰娱乐官网 76

48.无Flash版动态展示

澳门新葡亰娱乐官网 77

49.平滑菜单栏

澳门新葡亰娱乐官网 78

50.loading旋转效果

澳门新葡亰娱乐官网 79

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图