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）
属性描述CSS border在一个声明中设置所有的边框属性。 1 border-bottom在一个声明中设置所有的下边框属性。 1 border-bottom-color设置下边框的颜色。 2 border-bottom-style设置下边框的样式。 2 border-bottom-width设置下边框的宽度。 1 border-color设置四条边框的颜色。 1 border-left在一个声明中设置所有的左边框属性。 1 border-left-color设置左边框的颜色。 2 border-left-style设置左边框的样式。 2 border-left-width设置左边框的宽度。 1 border-right在一个声明中设置所有的右边框属性。 1 border-right-color设置右边框的颜色。 2 border-right-style设置右边框的样式。 2 border-right-width设置右边框的宽度。 1 border-style设置四条边框的样式。 1 border-top在一个声明中设置所有的上边框属性。 1 border-top-color设置上边框的颜色。 2 border-top-style设置上边框的样式。 2 border-top-width设置上边框的宽度。 1 border-width设置四条边框的宽度。 1 outline在一个声明中设置所有的轮廓属性。 2 outline-color设置轮廓的颜色。 2 outline-style设置轮廓的样式。 2 outline-width设置轮廓的宽度。 2 border-bottom-left-radius定义边框左下角的形状。 3 border-bottom-right-radius定义边框右下角的形状。 3 border-image简写属性，设置所有border-image-* 属性。 3 border-image-outset规定边框图像区域超出边框的量。 3
border-image-repeat图像边框是否应平铺(repeated)、铺满(rounded)或拉伸
3
(stretched)。
border-image-slice规定图像边框的向内偏移。 3 border-image-source规定用作边框的图片。 3 border-image-width规定图片边框的宽度。 3 border-radius简写属性，设置所有四个border-*-radius 属性。 3 border-top-left-radius定义边框左上角的形状。 3 border-top-right-radius定义边框右下角的形状。 3 box-decoration-break 3 box-shadow向方框添加一个或多个阴影。 3 Box 属性
属性描述CSS overflow-x如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。 3 overflow-y如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。 3 overflow-style规定溢出元素的首选滚动方法。 3 rotation围绕由rotation-point 属性定义的点对元素进行旋转。 3 rotation-point定义距离上左边框边缘的偏移点。 3 Color 属性
属性描述CSS color-profile 允许使用源的颜色配置文件的默认以外的规范。 3 opacity规定书签的级别。 3 rendering-intent 允许使用颜色配置文件渲染意图的默认以外的规范。 3 Content for Paged Media 属性
属性描述CSS bookmark-label 规定书签的标记。 3 bookmark-level 规定书签的级别。 3
bookmark-target 规定书签链接的目标。 3 float-offset 将元素放在float 属性通常放置的位置的相反方向。 3 hyphenate-after 规定连字单词中连字符之后的最小字符数。 3 hyphenate-before 规定连字单词中连字符之前的最小字符数。 3 hyphenate-character 规定当发生断字时显示的字符串。 3 hyphenate-lines 指示元素中连续断字连线的最大数。 3 hyphenate-resource 规定帮助浏览器确定断字点的外部资源（逗号分隔的列表）。 3 hyphens 设置如何对单词进行拆分，以改善段落的布局。 3 image-resolution 规定图像的正确分辨率。 3 marks 向文档添加裁切标记或十字标记。 3 string-set 3 CSS 尺寸属性（Dimension）
属性描述CSS height设置元素高度。 1 max-height设置元素的最大高度。 2 max-width设置元素的最大宽度。 2 min-height设置元素的最小高度。 2 min-width设置元素的最小宽度。 2 width设置元素的宽度。 1 可伸缩框属性（Flexible Box）
属性描述CSS box-align规定如何对齐框的子元素。 3 box-direction规定框的子元素的显示方向。 3 box-flex规定框的子元素是否可伸缩。 3 box-flex-group将可伸缩元素分配到柔性分组。 3 box-lines规定当超出父元素框的空间时，是否换行显示。 3 box-ordinal-group规定框的子元素的显示次序。 3
box-orient规定框的子元素是否应水平或垂直排列。 3 box-pack规定水平框中的水平位置或者垂直框中的垂直位置。 3 CSS 字体属性（Font）
属性描述CSS font在一个声明中设置所有字体属性。 1 font-family规定文本的字体系列。 1 font-size规定文本的字体尺寸。 1 font-size-adjust为元素规定aspect 值。 2 font-stretch收缩或拉伸当前的字体系列。 2 font-style规定文本的字体样式。 1 font-variant规定是否以小型大写字母的字体显示文本。 1 font-weight规定字体的粗细。 1 内容生成（Generated Content）
属性描述CSS content与:before 以及:after 伪元素配合使用，来插入生成内容。 2 counter-increment递增或递减一个或多个计数器。 2 counter-reset创建或重置一个或多个计数器。 2 quotes设置嵌套引用的引号类型。 2 crop 允许被替换元素仅仅是对象的矩形区域，而不是整个对象。 3 move-to 从流中删除元素，然后在文档中后面的点上重新插入。 3 page-policy 确定元素基于页面的occurrence 应用于计数器还是字符串值。 3 Grid 属性
属性描述CSS grid-columns规定网格中每个列的宽度。 3 grid-rows规定网格中每个列的高度。 3
Hyperlink 属性
属性描述CSS target简写属性，设置target-name、target-new以及target-position属性。 3 target-name规定在何处打开链接（链接的目标）。 3 target-new规定目标链接在新窗口还是在已有窗口的新标签页中打开。 3 target-position规定在何处放置新的目标链接。 3 CSS 列表属性（List）
属性描述CSS list-style在一个声明中设置所有的列表属性。 1 list-style-image将图象设置为列表项标记。 1 list-style-position设置列表项标记的放置位置。 1 list-style-type设置列表项标记的类型。 1 marker-offset 2 CSS 外边距属性（Margin）
属性描述CSS margin在一个声明中设置所有外边距属性。 1 margin-bottom设置元素的下外边距。 1 margin-left设置元素的左外边距。 1 margin-right设置元素的右外边距。 1 margin-top设置元素的上外边距。 1 Marquee 属性
属性描述CSS marquee-direction 设置移动内容的方向。 3 marquee-play-count 设置内容移动多少次。 3 marquee-speed 设置内容滚动得多快。 3
marquee-style 设置移动内容的样式。 3 多列属性（Multi-column）
属性描述CSS column-count规定元素应该被分隔的列数。 3 column-fill规定如何填充列。 3 column-gap规定列之间的间隔。 3 column-rule设置所有column-rule-* 属性的简写属性。 3 column-rule-color规定列之间规则的颜色。 3 column-rule-style规定列之间规则的样式。 3 column-rule-width规定列之间规则的宽度。 3 column-span规定元素应该横跨的列数。 3 column-width规定列的宽度。 3 columns规定设置column-width 和column-count 的简写属性。 3 CSS 内边距属性（Padding）
属性描述CSS padding在一个声明中设置所有内边距属性。 1 padding-bottom设置元素的下内边距。 1 padding-left设置元素的左内边距。 1 padding-right设置元素的右内边距。 1 padding-top设置元素的上内边距。 1 Paged Media 属性
属性描述CSS fit 示意如何对width和height属性均不是auto的被替换元素进行缩
3
放。
fit-position 定义盒内对象的对齐方式。 3 image-orientation 规定用户代理应用于图像的顺时针方向旋转。 3
page 规定元素应该被显示的页面特定类型。 3 size 规定页面内容包含框的尺寸和方向。 3 CSS 定位属性（Positioning）
属性描述CSS bottom设置定位元素下外边距边界与其包含块下边界之间的偏移。 2 clear规定元素的哪一侧不允许其他浮动元素。 1 clip剪裁绝对定位元素。 2 cursor规定要显示的光标的类型（形状）。 2 display规定元素应该生成的框的类型。 1 float规定框是否应该浮动。 1 left设置定位元素左外边距边界与其包含块左边界之间的偏移。 2 overflow规定当内容溢出元素框时发生的事情。 2 position规定元素的定位类型。 2 right设置定位元素右外边距边界与其包含块右边界之间的偏移。 2 top设置定位元素的上外边距边界与其包含块上边界之间的偏移。 2 vertical-align设置元素的垂直对齐方式。 1 visibility规定元素是否可见。 2
z-index设置元素的堆叠顺序。 2 CSS 打印属性（Print）
属性描述CSS orphans 设置当元素内部发生分页时必须在页面底部保留的最少行数。 2 page-break-after设置元素后的分页行为。 2 page-break-before设置元素前的分页行为。 2 page-break-inside设置元素内部的分页行为。 2 widows 设置当元素内部发生分页时必须在页面顶部保留的最少行数。 2 CSS 表格属性（Table）
属性描述CSS border-collapse规定是否合并表格边框。 2 border-spacing规定相邻单元格边框之间的距离。 2 caption-side规定表格标题的位置。 2 empty-cells规定是否显示表格中的空单元格上的边框和背景。 2 table-layout设置用于表格的布局算法。 2 CSS 文本属性（Text）
属性描述CSS color设置文本的颜色。 1 direction规定文本的方向/ 书写方向。 2 letter-spacing设置字符间距。 1 line-height设置行高。 1 text-align规定文本的水平对齐方式。 1 text-decoration规定添加到文本的装饰效果。 1 text-indent规定文本块首行的缩进。 1 text-shadow 规定添加到文本的阴影效果。 2 text-transform控制文本的大小写。 1 unicode-bidi设置文本方向。 2 white-space规定如何处理元素中的空白。 1 word-spacing设置单词间距。 1 hanging-punctuation规定标点字符是否位于线框之外。 3 punctuation-trim规定是否对标点字符进行修剪。 3 text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3 text-emphasis向元素的文本应用重点标记以及重点标记的前景色。 3 text-justify规定当text-align 设置为"justify" 时所使用的对齐方法。 3 text-outline规定文本的轮廓。 3 text-overflow规定当文本溢出包含元素时发生的事情。 3 text-shadow向文本添加阴影。 3
text-wrap规定文本的换行规则。 3 word-break规定非中日韩文本的换行规则。 3 word-wrap允许对长的不可分割的单词进行分割并换行到下一行。 3
2D/3D 转换属性（Transform）
属性描述CSS transform向元素应用2D 或3D 转换。 3 transform-origin允许你改变被转换元素的位置。 3 transform-style规定被嵌套元素如何在3D 空间中显示。 3 perspective规定3D 元素的透视效果。 3 perspective-origin规定3D 元素的底部位置。 3 backface-visibility定义元素在不面对屏幕时是否可见。 3 过渡属性（Transition）
属性描述CSS transition简写属性，用于在一个属性中设置四个过渡属性。 3 transition-property规定应用过渡的CSS 属性的名称。 3 transition-duration定义过渡效果花费的时间。 3 transition-timing-function规定过渡效果的时间曲线。 3 transition-delay规定过渡效果何时开始。 3 用户界面属性（User-interface）
属性描述CSS appearance允许您将元素设置为标准用户界面元素的外观 3 box-sizing允许您以确切的方式定义适应某个区域的具体内容。 3 icon为创作者提供使用图标化等价物来设置元素样式的能力。 3 nav-down规定在使用arrow-down 导航键时向何处导航。 3 nav-index设置元素的tab 键控制次序。 3 nav-left规定在使用arrow-left 导航键时向何处导航。 3
nav-right规定在使用arrow-right 导航键时向何处导航。 3 nav-up规定在使用arrow-up 导航键时向何处导航。 3 outline-offset对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。 3 resize规定是否可由用户对元素的尺寸进行调整。 3
?CSS 参考手册
?CSS 选择器
选择器例子例子描述CSS .class.intro 选择class="intro" 的所有元素。 1
#id#firstname 选择id="firstname" 的所有元素。 1
** 选择所有元素。 2 element p 选择所有
元素。 1 element,element div,p 选择所有
元
1
素。
1 element element div p 选择
元
素。
2 element>element div>p 选择父元素为
元素。
element+element div+p 选择紧接在
2
元素。
[attribute][target] 选择带有target 属性所有元素。 2 [attribute=value][target=_blank] 选择target="_blank" 的所有元素。 2 [attribute~=value][title~=flower] 选择title 属性包含单词"flower" 的
2
所有元素。
2 [attribute|=value][lang|=en] 选择lang 属性值以"en" 开头的所有
元素。
:link a:link 选择所有未被访问的链接。 1
:visited a:visited 选择所有已被访问的链接。 1
:active a:active 选择活动链接。 1
:hover a:hover 选择鼠标指针位于其上的链接。 1
:focus input:focus 选择获得焦点的input 元素。 2
:first-letter p:first-letter 选择每个
元素的首字母。 1
:first-line p:first-line 选择每个
元素的首行。 1 :first-child p:first-child 选择属于父元素的第一个子元素的每个
2
元素。
2 :before p:before 在每个
元素的内容之前插入内
容。
:after p:after 在每个
元素的内容之后插入内
2
容。
2 :lang(language)p:lang(it) 选择带有以"it" 开头的lang 属性值的
每个
元素。
element1~element2p~ul 选择前面有
元素的每个
3
元素。
3 [attribute^=value]a[src^="https"] 选择其src 属性值以"https" 开头的
每个 元素。
3 [attribute$=value]a[src$=".pdf"] 选择其src 属性以".pdf" 结尾的所有
3 [attribute*=value]a[src*="abc"] 选择其src 属性中包含"abc" 子串的
每个 元素。
:first-of-type p:first-of-type 选择属于其父元素的首个
元素的
3
每个
元素。
3 :last-of-type p:last-of-type 选择属于其父元素的最后
元素的
每个
元素。
:only-of-type p:only-of-type 选择属于其父元素唯一的
元素的
3
每个
元素。
3 :only-child p:only-child 选择属于其父元素的唯一子元素的每个
元素。
:nth-child(n)p:nth-child(2) 选择属于其父元素的第二个子元素的每
3
个
元素。
:nth-last-child(n)p:nth-last-child(2) 同上，从最后一个子元素开始计数。 3
3 :nth-of-type(n)p:nth-of-type(2) 选择属于其父元素第二个
元素的
每个
元素。
:nth-last-of-type(n)p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。 3 :last-child p:last-child 选择属于其父元素最后一个子元素每个
3
元素。
:root:root 选择文档的根元素。 3
:empty p:empty 选择没有子元素的每个
元素（包
3
括文本节点）。
:target#news:target 选择当前活动的#news 元素。 3 :enabled input:enabled 选择每个启用的 元素。 3 :disabled input:disabled 选择每个禁用的 元素 3 :checked input:checked 选择每个被选中的 元素。 3 :not(selector):not(p) 选择非
元素的每个元素。 3 ::selection::selection 选择被用户选取的元素部分。 3 ?CSS 参考手册
?CSS 听觉参考手册
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/8a4946312.html, web前端培训教程：CSS3 的动画效果 本章主要探讨HTML5 中CSS3 的动画效果，可以通过类似Flash 那样的关键帧模式控制运行。 一．动画简介 CSS3 提供了类似Flash 关键帧控制的动画效果，通过animation 属性实现。那么之前的transition 属性只能通过指定属性的初始状态和结束状态来实现动画效果，有一定的局限性。 animation 实现动画效果主要由两个部分组成： 1.通过类似Flash 动画中的关键帧声明一个动画； 2.在animation 属性中调用关键帧声明的动画。 CSS3 提供的animation 是一个复合属性，它包含了很多子属性。如下表所示：
海文国际https://www.360docs.net/doc/8a4946312.html, 除了这9 个属性之外，动画效果还有一个重要的属性，就是关键帧属性： @keyframes。 它的作用是声明一个动画，然后在animation 调用关键帧声明的动画。 //基本格式，“name”可自定义 @keyframes name { /*...*/ } 二．属性详解 在讲解动画属性之前，先创建一个基本的样式。 //一个div 元素
海文国际https://www.360docs.net/doc/8a4946312.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，关键帧），然后动画将自行计算并模拟关键帧之间的过渡。那么在
html5教程：8个炫酷CSS动画及源码分享
html5教程：8个炫酷CSS动画及源码分享在现代网页中，我们已经越来越习惯使用大量的CSS3元素，而现在的浏览器也基本都支持CSS3，所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页。本文要分享8个超炫酷的纯CSS3动画，有几个非常经典，比如大象走路的那个，如果你对CSS3感兴趣，赶紧来看看吧。 1、纯CSS3实现大象走路动画之前我们分享过一款纯CSS3人物行走动画，效果相当震撼。这一次要给大家介绍的是一款纯CSS3实现的大象走路动画，大象走路时的形态表现的十分逼真，你可能不会想到，这么给力的动画居然是用纯CSS3实现的，很可爱的大象，下载源码自己去研究吧。 2、纯CSS3实现苹果设备 iPhone iPad iMac及iWatch今天我们又要用CSS3来绘制一些有趣的东西，这次要绘制的是全套的苹果设备，包括iPhone、iPad、iMac及iWatch，配合各自的界面壁纸，显得非常逼真，同时跟现实中的设备一样，屏幕同样具有切换的效果，只不过这个是定时切换，并不能滑动切换，有兴趣的同学可以自行实现一下。 3、纯CSS3实现变形金刚组装动画特效今天要分享的依然是一款用纯CSS3实现的动画，是一个变形金刚组装动画特效，这种组装动画将人物的各部位按某种顺序组合起来，显得非常酷。 4、纯CSS3 3D按钮按钮酷似牛奶般剔透CSS3按钮一般都可以设计的非常漂亮，利用投影、渐变等CSS3属性特效可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别，它看上去酷似晶莹剔透的牛奶，而且在点击按钮时出现3D效果的动画，按钮按下时，按钮会轻轻的弹动一下，非常逼真。 5、CSS3音量调节旋转按钮之前我们分享过很多可以调节音量的HTML5视频播放器，大部分音量调节按钮都比较普通，没有什么特色。今天要分享一款基于CSS3的音量调节旋转按钮，只要按住鼠标即可旋转按钮来调节音量。这是一款很有特色旋转按钮。
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指定元素状态的变化速率
CSS3中的Transition属性详解
CSS3中的Transition 属性详解 W3C 标准中对CSS3的transition 这是样描述的:"CSS 的transition 允许CSS 的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS 的属性值。" 下面我们从最简单的语法和属性值开始一步一步来学习transition 的具体使用： 语法： 1 2 3 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 ： 语法：.transition-property ： none | all | [
CSS3 skew倾斜、rotate旋转动画
CSS3 skew倾斜、rotate旋转动画 css3出现之前，我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写，脚本代码较为复杂； 若需要实现倾斜、旋转之类的动画难度将更高（我还没试过用JavaScript或Jquery如何实现），而且即使能实现估计花的时间代价及维护难度是很大的，很多时候只能依靠画图工具制作此类动画文件； 有时候在想如果不用脚本语言，也不用画图工作制作动画文件，就能在网页上实现倾斜、旋转之类的动画效果多好。 最近挤出一些业余时间学习CSS3，其中就包含很多动画示例，花了点时间学习和整理 今天分享使用html+css3实现skew倾斜、rotate旋转动画，我们先看最终效果图（我这里为了演示效果，就用QQ屏幕截成多张图片，然后制作成gif动画给大家简单展示下，效果不好请大家多多包涵）
图1 具体步骤如下： 1、放置两个div，一个作为容器（图1中绿色背景部分id="warp"），另一个作为动画元素（图1中黄色背景部分 id="box"） HTML代码： CSS代码（设置容器及动画元素默认样式）：
注意：#box{position: relative;}是为该元素接下来做动画做准备，因为动画过程中需要改变其位置，故这里使用相对定位 上述代码为基本的html css，大家应该没问题吧 此时效果如下： 2、使用CSS3 @keyframes自定义动画 CSS代码：
height: 40px; } 20% { top: 0; left: 0; transform: skewX(50deg); width: 60px; height: 20px; background: red; } 22% { top: 0; left: 0; transform: skewX(0deg); width: 40px; height: 40px; } 30% { top: 0; left: 0; transform: skewX(0deg); width: 320px; height: 40px; } 40% { top: 0; left: 280px; transform: skewX(0deg); width: 40px; height: 40px; background: green; } 50% { top: 0; left: 280px; transform: skewX(0deg); width: 20px; height: 320px; } 55% { top: 280px; left: 280px; transform: skewX(0deg);
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文件如下。