47个效果惊人的CSS3动画演示
或许你已经看过很多关于CSS3动画的技术，包括前端观察之前发表的一些，那么现在就情看一看CSS3动画的魅力吧。这里是一辑47个令人瞠目结舌的CSS3动画演示。他们演示了CSS3能给我们带来的巨大的可能性。
1.使用jQuery的CSS3时钟
2.模拟时钟
3.使用方向键旋转的3D盒子
4.多个3D盒子(滑入/滑出)
5. CSS3折叠
6. 自动滚动的视差
7. Isocube
8. 图片画廊
9. 矩阵
10. 7个使用CSS3的Javascript效果替代
11. 图片滑过效果
12. 转动的可乐罐(通过滚动条控制)
PS:这个例子和下面这个严格来说都不是用的CSS3技术，而是复杂的图片和css的background-position属性的应用。
13. 3D 房间
14. 宝利来画廊
15. 太空
注意: 这个演示依赖图形，需要一些时间来加载，但是结果非常疯狂!
16. Mac Dock
17. 滑入的模态窗口
18. 滑动的唱片
19. 放大的宝利来画廊
20. 动画的火箭
21. Poster Circle
这个需要支持3D动画的浏览器才能看到全部效果，比如Mac版Safari4浏览器
22. 变形的盒子
23. 落叶
24. 动画效果宝利来画廊
25. 聚光灯投影
26. 彩色时钟
27. Lightbox 画廊(可拖拽)
28. 弹性所略图菜单
29. Coverflow
30. 雪花
31. jQuery DJ Hero
32. 动态的堆叠卡
33. 另一个图片画廊
34. 雪栈(用方向键控制)
35. 动画的定价分组
36. 光滑的jQuery菜单
37. CSS3
38. 不用Javascript的CSS Tabs
39. 无JavaScript的Tab菜单
40. SVG Fisheye菜单
41. 无Flash的动态演示
CSS3关键帧动画
CSS3关键帧动画 本文转载自创美优品，转载就保留此信息。我决定探索该地区的CSS3关键帧动画。的想法很简单-创造一种虚拟明信片。我住在巴黎，所以很明显我给你我的问候，从巴黎:)
下载源文件 （。psd文件） 明信片从巴黎的。zip 1.9MB CSS3的动画支持：Chrome浏览器2 +，Safari 4的+，火狐5 +，iOS的Safari浏览器3.2和 Android 2.1系统+（源碎杂志）。 我们将3个要素：云中的动画（有三个层次的云），旋转法尔灯和艾菲尔铁塔闪闪发光。 的HTML结构其实很简单：
Bonne Nuit PARIS !
我们将使用下面的图片（我将讨论一点点波光粼粼的效果），让我们先来完成的CSS样式表：
动画云
web前端培训教程：CSS3 的动画效果
海文国际https://www.360docs.net/doc/998875961.html, web前端培训教程：CSS3 的动画效果 本章主要探讨HTML5 中CSS3 的动画效果，可以通过类似Flash 那样的关键帧模式控制运行。 一．动画简介 CSS3 提供了类似Flash 关键帧控制的动画效果，通过animation 属性实现。那么之前的transition 属性只能通过指定属性的初始状态和结束状态来实现动画效果，有一定的局限性。 animation 实现动画效果主要由两个部分组成： 1.通过类似Flash 动画中的关键帧声明一个动画； 2.在animation 属性中调用关键帧声明的动画。 CSS3 提供的animation 是一个复合属性，它包含了很多子属性。如下表所示：
海文国际https://www.360docs.net/doc/998875961.html, 除了这9 个属性之外，动画效果还有一个重要的属性，就是关键帧属性： @keyframes。 它的作用是声明一个动画，然后在animation 调用关键帧声明的动画。 //基本格式，“name”可自定义 @keyframes name { /*...*/ } 二．属性详解 在讲解动画属性之前，先创建一个基本的样式。 //一个div 元素
海文国际https://www.360docs.net/doc/998875961.html, //设置CSS div { width: 200px; height: 200px; background-color: white; border: 1px solid green; } 1.@keyframes //创建动画的第一步，先声明一个动画关键帧。 @keyframesmyani { 0% { background-color: white; margin-left:0px; } 50% { background-color: black; margin-left:100px; } 100% { background-color: white; margin-left:0px;
10款让人惊叹的html5动画效果
10款让人惊叹的html5动画效果 这里介绍10款让人叹为观止的html5动画效果 1、15种html5+css3图片堆叠图片展示特效 这是一款html5和css3制作的图片堆叠图片展示特效，就像一幅扑克牌堆叠在一起，最开始只能看到一张，点击按钮后就会展开成几张，非常有意思。 2、html5 svg+css3制作图片边框运动动画效果
一款使用html5 svg技术制作的图片边框运动动画效果，鼠标移动到图片上时，便会有几条线绕着边框运动，共有4种不同的效果。建议使用Firefox或Chrome浏览器观看。 3、21种html5+css3鼠标悬停hover超链接导航条动画效果 利用css3 transition属性制作的21种不同的鼠标悬停效果。当鼠标hover或悬停在超链接上时，
会触发各种动画效果。每种动画效果都十分独特，可用于网站导航。 4、18种基于html5 svg和css3的神奇超链接动画效果 普通的超链接效果是鼠标放上去出现一条下划线，本插件异想天开的使用html5 svg和css3打造出18种很神奇的超链接动画效果。每种超链接动画效果都有它的独到之处。 5、html5+css3网格图片3d翻转Loading页面切换效果
这是一个图片html5和css3制作的3d翻转Loading页面切换效果。在页面上以网格的形式展示所有的页面缩略图，当点击了缩略图片后，图片进行3d翻转，然后加载相应的页面内容。 6、12种利用html5+css3打造的消息提示框效果 这是12种风格各异的弹出消息提示框效果，使用html5和css3 animation属性制作，有各种旋转、翻转、伸展特效。效果非常华丽。
CSS3主要知识点总结+HTML5新标签(图文版)分析
总结+HTML5新增标签 目录： 1 2 3 4 5 6 7 8 分享2014-4-1 HTML5上课笔记
1）边框 ① border-colors 相关属性border-top-colors border-right-colors border-bottom-colors border-left-colors ② border-image ： stretch 拉伸方式来填充边框背景图| repeat 平铺图片碰到边界时超出截断 | round 平铺，图片会工具边框的尺寸动态调整图片大小直至刚好铺满整个边框 ③ border-radius 相关属性border-radius: 1-4 length | % / 1 border-radius数值为合模型的一半就变成圆，记住：不是相对于合模型的width（如：965x1611），而是整个框才是 结果就显示的不是正圆，所以border-radius:300px; 才能显示正圆，加上border的值 '/'前面表示水平方向，后面表示垂直方向。每个方向都可以用1~4个值，缩写的规则遵循“左上开始，顺时针旋转/只能写一个 2）阴影 1.文本阴影 text-shadow（不需要判断浏览器） text-shadow:2px 3px 2px #000; 文字阴影的结构是按照以下顺序：X--偏移，Y--偏移，模糊，和颜色; text-shadow:-2px -3px 2px rgba(0, 118, 160, .25); 设置为负值，X -偏移阴影转移到左侧。设置为负值偏移Y -转移阴影顶端。颜色可以用RGBA值。 text-shadow:0px 1px 0px #fff,0px -p1x 0px #000； 文字阴影的列表（以逗号分隔）,1px的顶部和底部1px的阴影。 text-shadow：水平偏移量垂直偏移量阴影模糊值颜色， 水平偏移量垂直偏移量阴影模糊值颜色；（多个阴影用，隔开） eg： .con2 p { font-size: 90px; color:#fff;
css3动画效果总结
CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单 的动画效果而不需要再去借助 JavaScript 。CSS3动画的属性主要分为三类: transform 、 transition 以及 animation 。 transform rotate 设置元素顺时针旋转的角度，用法是: transform: rotate(x); 参数x 必须是以deg 结尾的角度数或0,可为负数表示反向 scale 设置元素放大或缩小的倍数，用法包括: transform: skewX(a); 元素 x 方向逆时针倾斜角度 a ，y 方向不变 transform: scale(a); 元素x 和y 方向均缩放a 倍 transform: scale(a, b); transform: scaleX(a); transform: scaleY(b); 元素x 方向缩放 元素x 方向缩放 元素y 方向缩放 a 倍，y 方向缩放b 倍 a 倍，y 方向不变 b 倍，x 方向不变 translate 设置元素的位移，用法为: transform: translate(a, b); transform: translateX(a); transform: translateY(b); 元素x 方向位移a ，y 方向位移b 元素x 方向位移a ，y 方向不变 元素y 方向位移b ，x 方向不变 skew 设置元素倾斜的角度，用法包括: transform: skew(a, b); 斜角度b 元素x 方向逆时针倾斜角度 a ，y 方向顺时针倾
transform: skewY(b); 元素y 方向顺时针倾斜角度b ，想方向不变 以上的参数均必须是以deg 结尾的角度数或0，可为负数表示反向。matrix 设置元素的变形矩阵，因为矩阵变形过于复杂，暂略。 origin 设置元素的悬挂点，用法包括：transform-origin: a b; 元素的悬挂点为(a, b) 元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b 可以是长度值、以%结尾的百分比或者left 、top 、right 、bottom 四个值。 transition transition-property 指定transition效果作用的CSS属性，其值是CSS属性名。 transition-duration 动画效果持续的时间，其值为以s结尾的秒数。 transition-timing-function 指定元素状态的变化速率函数，其取值基于贝赛尔曲线函数，详情如下所示：transition-delay 动画效果推迟开始执行的时间，其值为以s结尾的秒数。 CSS3动画的生命周期如下图所示，从中可以清楚的看出duration和delay之间的关系： animation CSS3中真正的动画属性是animation，而前面的transform 和transition都只是对DOM元素的变形或者是状态的过渡。实际上，CSS3所支持的动画效果 只是填充动画，也就是说先设定整个动画生命周期中的几个关键状态 （key frame，关键帧），然后动画将自行计算并模拟关键帧之间的过渡。那么在
css3实现动画效果常用方法
css3实现动画效果常用方法 早期在web中要实现动画效果，都是依赖于JavaScript或flash来完成，但在css3中新增加了一个新的模块transition，它可以通过一些简单的css事件来触发元素的外观变化，让效果显得更加细腻。简单来说，就是通过鼠标的单击、获得焦点、被点击、或对元素任何改变中触发，并平滑地以动画效果改变css属性值 在css中创建简单的过渡效果可以从以下几个步骤来实现： （1）在默认样式中声明元素的初始状态样式 （2）声明过渡元素最终状态样式，比如悬浮状态 （3）在默认样式中通过添加过渡函数，添加一些不同的样式 1、css变形属性 transform属性的基本语法如下： translate(): 移动元素，可以根据X轴和Y轴坐标重新定位元素位置。在此基础上有两个扩展函数translateX()和translateY(); scale():缩小或方法元素，可以使用元素尺寸发生变化，在此基础上用两个扩展函数scaleX()和scaleY(); rotate(): 旋转元素，其参数值为旋转的角度值（360deg） skwe();让元素倾斜。在此基础上有两个扩展函数skewX()和skewY() matrix():定义矩阵变形，基于X轴和Y轴 2、过渡属性transition 过渡属性是一个复合属性，主要包括以下几个属性 transition-property:指定过渡或动态模拟的css属性（CSS属性名称） transition-duration:指定完成过渡所需的时间（持续时间） transition-timing-function:指定过渡函数（缓动函数） transition-delay:指定开始出现的延迟时间（改变元素属性值后多长时间开始执行） transition的优点在于简单易用，但是它有几个很大的局限。 （1）transition需要事件触发，所以没法在网页加载时自动发生。 （2）transition是一次性的，不能重复发生，除非一再触发。 （3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。 （4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。 3、animation动画 animation-name属性主要用来调用@keyframes定义好的动画
css3动画效果总结
css3动画效果总结 scale(a); 元素x和y方向均缩放a倍transform: scale(a, b); 元素x方向缩放a倍，y方向缩放b倍transform: scaleX(a); 元素x方向缩放a倍，y方向不变transform: scaleY(b); 元素y方向缩放b倍，x方向不变translate设置元素的位移，用法为：transform: translate(a, b); 元素x方向 位移a，y方向位移btransform: translateX(a); 元素x方向位移a，y方向不变transform: translateY(b); 元素y方向位移b，x方向不变skew设置元素倾斜的角度，用法包括：transform: skew(a, b); 元素x方向逆时针倾斜角度a，y方向顺时针倾斜角度btransform: skewX(a); 元素x方向逆时针倾斜角度a，y方向不变transform: skewY(b); 元素y方向顺时针倾斜角度b，想方向不变以上的参数均必须是以deg结尾的角度数或0，可为负数表示反向。matrix设置元素的变形矩阵，因为矩阵变形过于复杂，暂略。origin设置元素的悬挂点，用法包括：transform-origin: a b; 元素的悬挂点为(a, b)元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。transitiontransition-property指定transition效果作用的CSS属性，其值是CSS属性名。transition-duration动画效果持续的时间，其值为以s结尾的秒数。transition-timing-function指定元素状态的变化速率
HTML5动画特效
超级惊艳 10款HTML5动画特效推荐 2014-07-04 09:52 超人 html5tricks 字号：T | T 今天我们要来推荐 10 款超级惊艳的 HTML5 动画特效，有一些是基于 CSS3 和 jQuery 的，比较实用，特别是前几个 HTML5 动画，简直酷毙了，现在将它们分享给大家，也许你能用到这些 HTML5 动画和 jQuery 应用。 AD：2014WOT全球软件技术峰会北京站课程视频发布 11月21日-22日与WOT技术大会相约深圳现在抢票 今天我们要来推荐 10 款超级惊艳的 HTML5 动画特效，有一些是基于 CSS3 和 jQuery 的，比较实用，特别是前几个 HTML5 动画，简直酷毙了，现在将它们分享给大家，也许你能用到这些 HTML5 动画和 jQuery 应用。 1、HTML5 Canvas 发光 Loading 动画 之前我们分享过很多基于 CSS3 的 Loading 动画效果，相信大家都很喜欢。今天我们要来分享一款基于 HTML5 Canvas 的发光Loading 加载动画特效。Loading 旋转图标是在 canvas 画布上绘制的，整个 loading 动画是发光 3D 的视觉效果，HTML5 非常强大。 在线演示源码下载 2、jQuery 球状放大镜特效插件
今天我们要来分享一款基于 jQuery 的放大镜特效插件，和其他放大镜不同的是，这款 jQuery 放大镜插件是球状的，看上去有 3D 的视觉效果。当你把鼠标滑过页面上的文字时，即会出现很酷的球状放大镜，来放大当前区域的文字。并且以球心为中心点向外文字逐渐变小，这就产生了立体感。 在线演示源码下载 3、HTML5 Canvas 粒子模拟效果 这是一款利用 HTML5 Canvas 模拟出来的 30000 个粒子动画，当你用鼠标在 canvas 画布上移动时，鼠标周围的一些粒子就会跟着你移动，并形成一定的图案，就像你在玩沙画一样，效果非常不错。这里，我们应用了一些 HTML5 的特性，让这个粒子动画显得相当动感。
CSS动画实例：10个有关五角星的动画特效
CSS动画实例：10个有关五角星的动画特效 设页面中有
，若定义. star的样式规则如下： .star { position: absolute; display: block; width:0px; height:0px; left:calc(50% - 50px); top:calc(50% - 23px); border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom:35px solid red; transform:rotate(35deg); } .star:before { content: ''; position: absolute; width: 0px; height: 0px; top: -22.5px; left: -31.25px; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 40px solid red; transform: rotate(-35deg); } .star:after { content: ''; position: absolute; width: 0px; height: 0px; top: 1.5px; left: -52.5px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 35px solid red; transform:rotate(-70deg); }CSS动画实例：一颗躁动的心
CSS动画实例：一颗躁动的心 在页面中放置一个类名为container的层作为盛放心心的容器，在该层中再定义一个名为heart的子层，HTML代码描述如下：
CSS3动画属性Transition
今天我们接着一起来看CSS3动画属性中的一个属性Transition 。 W3C 标准中对css3的transition 这是样描述的：“css 的transition 允许css 的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS 的属性值。” 下面我们同样从其最语法和属性值开始一步一步来学习transition 的具体使用 语法： 1 transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* transition 主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间 段，变换的速率变化 transition-timing-function,变换延迟时间transition-delay 。下面分别来看这四个属性值 一、transition-property: 语法： 1 t ransition-property ： none | all | [
CSS3 动画属性
CSS3 动画属性（Animation） 属性描述CSS @keyframes规定动画。 3 3 animation所有动画属性的简写属性，除了animation-play-state 属 性。 animation-name规定@keyframes 动画的名称。 3 animation-duration规定动画完成一个周期所花费的秒或毫秒。 3 animation-timing-function规定动画的速度曲线。 3 animation-delay规定动画何时开始。 3 animation-iteration-count规定动画被播放的次数。 3 animation-direction规定动画是否在下一周期逆向地播放。 3 animation-play-state规定动画是否正在运行或暂停。 3 animation-fill-mode规定对象动画时间之外的状态。 3 CSS 背景属性（Background） 属性描述CSS background在一个声明中设置所有的背景属性。 1 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。 1 background-color设置元素的背景颜色。 1 background-image设置元素的背景图像。 1 background-position设置背景图像的开始位置。 1 background-repeat设置是否及如何重复背景图像。 1 background-clip规定背景的绘制区域。 3 background-origin规定背景图片的定位区域。 3 background-size规定背景图片的尺寸。 3 CSS 边框属性（Border 和Outline）
CSS3 transition实现超酷图片墙动画效果
CSS3 transition实现超酷图片墙动画效果 有了CSS3，实现效果就是这么简单。加群四一八加上三五五最后五三一了解更多web实战知识。 功能介绍web前端的技术学习(html,css,js)每天进步一小步，人生进步一大步！ 工具/原料 电脑 坚持和耐心 方法/步骤 1 一、前面的感慨以前也陆陆续续试过CSS3的一些特性，文字投影，多边框等。但都是试试而已，知道有这么回事。今天，见到了一个新玩意，transition，认认真真的试了一下，经过，我懵了，我呆了，我傻了，半天说不出话来，这…这…unbelievable，amazing，太神奇了，太不可思议了，几行简单的CSS，如此炫酷的动画效果，flash都不及的动画效果，我真是难以表达我的心情。 下面由浅入深，使用纯CSS，一步一步实现图片墙动画效果。这里，必须要先说明一下：对于对于此transition效果，IE6,IE7,IE8浏览器可以回家过元旦节了，这里没有它们的事情，Firefox3虽然平时表现不错，这里也没有它的事情。这个效果最拿手的是chrome2浏览器，Safari4，也就是webkit家族，这里Firefox3.5勉强凑合，有盒阴影和旋转效果，但是没有动画。所以，下文陆续提供的demo页面仅适用于chrome浏览器和Safari浏览器，部分适用于Firefox3.5+，IE纯粹的观众。 2 二、基础练习–实现旋转与盒投影效果在CSS3中，实现旋转效果需要用到transform属性中的rotate属性；实现盒阴影效果需要使用box-shadow属性。具体参见下面的示例代码。-webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); transform:rotate(10deg); -webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); 上面代码部分，首先应该知道的是webkit表示webkit核心的浏览器，是其私有属性，作用
CSS动画实例：六边形
CSS动画实例：六边形 设页面中有
，若定义. hexagon的样式规则如下：.hexagon { top:50px; left:50px; position: absolute; width: 40px; height: 23px; background-color: #f0f; } .hexagon::before { content: ""; position: absolute; top: -11.5px; left: 0; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 11.5px solid #f0f; } .hexagon::after { content: ""; position: absolute; top: 23px; left: 0; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 11.5px solid #f0f; } 可在页面中绘制出如图1所示的六边形。 图1 六边形下面将多个如图1所示的六边形作为基本动画元素，为它们定义关键帧，使这些六边形产生动画效果。 1．淡入淡出的六边形 在页面中放置7个六边形，这7个六边形按上下两行各两个，中间一行三个的方式镶嵌在一起，定义关键帧，使得这7个六边形依次淡入淡出。 编写的HTML文件如下。