网站怎么营销,商河做网站公司,app线上推广方式,网站背景图片代码CSS3的三个与变形和动画啊相关的属性#xff1a;
Transform
浏览器支持情况#xff1a;
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性#xff08;仅适用于 2D 转换#xff09;。
Safari 和 Chrome…CSS3的三个与变形和动画啊相关的属性
Transform
浏览器支持情况
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性仅适用于 2D 转换。
Safari 和 Chrome 支持替代的 -webkit-transform 属性3D 和 2D 转换。
Opera 只支持 2D 转换。
2D transform变换方法
函数描述translate(x,y)定义 2D 转换沿着 X 和 Y 轴移动元素rotate(angle)定义 2D 旋转在参数中规定角度scale(x,y)定义 2D 缩放转换改变元素的宽度和高度skew(x-angle,y-angle)定义 2D 倾斜转换沿着 X 和 Y 轴matrix(n,n,n,n,n,n)定义 2D 转换使用六个值的矩阵
translate(x, y)方法根据左(X轴)和顶部(Y轴)位置给定的参数从当前元素位置移动。x, y的值可以取正负分别表示表示向不同的方向偏移。rotate(angle)方法 表示旋转angle角度。angle为正时按顺时针角度旋转为负值时元素逆时针旋转。scale(x, y)方法表示元素在x轴和y轴上的缩放比例参数大于1时元素放大小于1时元素缩小。skew(x-angle,y-angle)方法用来对元素进行扭曲变行第一个参数是水平方向扭曲角度第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数如果没有设置第二个参数那么Y轴为0degmatrix(n,n,n,n,n,n)方法 以一个含六值的变换矩阵的形式指定一个2D变换此属性值使用涉及到数学中的矩阵
transform-origin 属性
前面我们提到的transform的方法都是基于元素的中心来变换的也就是元素变换的基点默认是元素的中心。但是有时候我们需要在不同的位置对元素进行这些操作那么我们就可以使用transform-origin来对元素进行基点位置改变。该属性可以接收三个参数
transform-origin: x-axis y-axis z-axis;
x-axis表示水平方向上的取值可以取 字符参数值left,center right也可以取百分比字符参数值对应的百分值为left0%;center50%;right100%。y-axis表示竖直方向上的取值还可以设置字符值top,center,bottom也可以取百分比字符参数值对应的百分值为top0%;center50%;bottom100%。z-axis表示视图被置于 Z 轴的何处用于3D变形中。
3D transform变换方法
Internet Explorer 10 和 Firefox 支持 3D 转换. Chrome 和 Safari 必须添加前缀 -webkit-. Opera 还不支持 3D 转换(支持 2D 转换 ).
三维变换使用基于二维变换的相同属性。CSS3中的3D变换主要包括以下几种功能函数
3D位移CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数3D旋转CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数3D缩放CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数3D矩阵CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。
还有以下几个转换属性
transform-style 规定被嵌套元素如何在 3D 空间中显示。perspective 规定 3D 元素的透视效果。perspective-origin 规定 3D 元素的底部位置。backface-visibility 定义元素在不面对屏幕时是否可见。 目前各大主流浏览器对transform 3d属性的兼容性还不是特别好感兴趣的读者可以自行深入了解。下面我们介绍几个常用的功能方法
rotateX()方法围绕其在一个给定度数X轴旋转的元素 rotateY()方法围绕其在一个给定度数Y轴旋转的元素 rotateZ()方法围绕其在一个给定度数Z轴旋转的元素。 Transition
W3C标准中对css3的transition这是样描述的“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发并圆滑地以动画效果改变CSS的属性值。”
transition属性的值包括以下四个
transition-property 指定对HTML元素的哪个css属性进行过渡渐变处理这个属性可以是color、width、height等各种标准的css属性。transition-duration指定属性过渡的持续时间transition-timing-function指定渐变的速度 1、ease逐渐变慢默认值ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) 2、linear匀速linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) 3、ease-in(加速)ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) 4、ease-out减速ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0) 5、ease-in-out加速然后减速ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 6、cubic-bezier该值允许你去自定义一个时间曲线 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内否则无效。transition-delay指定延迟时间也就是经过多长时间才开始执行过渡过程。 浏览器兼容性
Internet Explorer 9 以及更早的版本不支持 transition 属性。
Internet Explorer 10, Firefox, Opera 和 Chrome支持transition 属性。Chrome 25 以及更早的版本以及Safari 需要前缀 -webkit-。 Animation
要使用animation动画先要熟悉一下keyframes,Keyframes的语法规则:命名是由”keyframes”开头后面紧接着是这个“动画的名称”加上一对花括号“{}”括号中就是一些不同时间段样式规则。不同关键帧是通过from相当于0%、to相当于100%或百分比来表示为了得到最佳的浏览器支持建议使用百分比 keyframes定义好了要使其能发挥效果必须通过animation把它绑定到一个选择器否则动画不会有任何效果。下面列出了animation的属性
属性描述取值animation所有动画属性的简写属性除了 animation-play-state 属性 animation-name规定 keyframes 动画的名称 animation-duration规定动画完成一个周期所花费的秒或毫秒默认是 0animation-timing-function规定动画的速度曲线默认是 “ease”animation-delay规定动画何时开始默认是 0animation-iteration-count规定动画被播放的次数默认是 1infinite无限次animation-direction规定动画是否在下一周期逆向地播放默认是 “normal”reverse反向播放alternate奇数次正向播放偶数次反向播放alternate-reverse奇数次反向播放偶数次正向播放。animation-play-state规定动画是否正在运行或暂停 默认是 “running”paused暂停动画 浏览器兼容性
Internet Explorer 10、Firefox 以及 Opera 支持 keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注意Internet Explorer 9以及更早的版本不支持 keyframe 规则或 animation 属性。 Transform、Transition、Animation 的区别 Transform对元素进行变形 Transition对元素某个属性或多个属性的变化进行控制时间等类似flash的补间动画。但只有两个关键贞。开始结束。 Animation对元素某个属性或多个属性的变化进行控制时间等类似flash的补间动画。可以设置多个关键贞。 Transition与Animation: transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元 素css的属性值从而达到一种动画的效果。 以上大部分内容来自http://blog.csdn.net/u014607184/article/details/51801393 感谢作者
