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文件如下。