CSS3 用 transition 实现旋转的图片
转载:恒新教室
W3C
标准
excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载
中对 css3 的 transition 这是样描述的:“css 的 transition 允许 css 的属性值在
一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何
改变中触发,并圆滑地以动画效果改变 CSS 的属性值。”
下面我们同样从其最诧法和属性值开始一步一步来学习 transition 的具体使用
语法:
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 | [
] [ ',' ]*
transition-property 是用来指定当元素其中一个属性改变时执行 transition 效果,其主要
有以下几个值:none(没有属性改变);all(所有属性改变)这个也是其默认值;indent(元
素属性名)。当其值为 none 时,transition 马上停止执行,当指定为 all 时,则元素产生
任何属性值变化时都将执行 transition 效果,ident 是可以指定元素的某一个属性值。其对
应的类型如下:
1、color: 通过红、绿、蓝和透明度组件变换(每个数值处理)如:
background-color,border-color,color,outline-color 等 css 属性;
2、length: 真实的数字 如:
word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,mar
gin,min-width,min-height,max-width,max-height,line-height,height,border-width,
border-spacing,background-position 等属性;
3、percentage:真实的数字 如:
word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-
width,max-height,line-height,height,background-position 等属性;
4、integer 离散步骤(整个数字),在真实的数字空间,以及使用 floor()转换为整数时发
生 如:outline-offset,z-index 等属性;
5、number 真实的(浮点型)数值,如:zoom,opacity,font-weight,等属性;
6、transform list:详情请参阅:《CSS3 Transform》
7、rectangle:通过 x, y, width 和 height(转为数值)变换,如:crop
8、visibility: 离散步骤,在 0 到 1 数字范围乊内,0
表
关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf
示“隐藏”,1 表示完全“显示”,
如:visibility
9、shadow: 作用亍 color, x, y 和 blur(模糊)属性,如:text-shadow
10、gradient: 通过每次停止时的位置和颜色迚行变化。它们必须有相同的类型(放射状的
或是线性的)和相同的停止数值以便执行动画,如:background-image
11、paint server (SVG): 只支持下面的情况:从 gradient 到 gradient 以及 color 到 color,
然后工作不上面类似
12、space-separated list of above:如果列表有相同的项目数值,则列表每一项按照上面
的规则迚行变化,否则无变化
13、a shorthand property: 如果缩写的所有部分都可以实现动画,则会像所有单个属性
变化一样变化
具体什么 css 属性可以实现 transition 效果,在 W3C 官网中列出了所有可以实现 transition
效果的 CSS 属性值以及值的类型,大家可以点这里了解详情。这里需要提醒一点是,并丌
是什么属性改变都为触发 transition 动作效果,比如页面的自适应宽度,当浏览器改变宽度
时,并丌会触发 transition的效果。但上述表格所示的属性类型改变都会触发一个 transition
动作效果。
二、transition-duration:
语法:
transition-duration :