box-shadow,translate translate transition的区别
来源:互联网 发布:2018php工作 编辑:程序博客网 时间:2024/05/16 01:41
http://www.css88.com/tool/css3Preview/Linear-Gradients.html
Transform
transform:rotate():
含义:旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”下同。
.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}
transform:skew():含义:倾斜;
.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}
transform:scale():
含义:比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。
.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}
transform:translate():
含义:变动,位移;如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。
.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}
Transition又包含了四个子属性,分别为property、duration、timing-function、delay
1. transition-property:
property针对了当前选择器的某个css属性进行设置。比如我要过渡一个背景色时,则设置property值background。
2. transition-duration:
duration针对了过渡效果的持续时间。
3. transition-timing-function:
timing-function算是Transition属性中最为复杂的一个了。它针对了过渡效果的特效,有多种特效展示。这里得涉及到一个学术性的话题:貝茲曲線。说实话,我也没搞的太明白,但W3C给出了一张曲线图,一看就明白了(后附图)。
ease: 默认值(先快后慢)
linear: 匀速
ease-in: 先慢后快
ease-out: 先快后慢
ease-in-out: 先慢后快后慢
cubic-bezier(x1, y1, x2, y2) 为自定义,x1,x2,y1,y2的值范围在[0, 1]
图上有四点,P0-3,其中P0、P3是默认的点,对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的
4. transition-delay:
duration针对了过渡效果的延迟执行时间。
5. 代码演示:
1). 过渡单个属性:
2). 过渡多个属性:
[1]. 上下一一对应型:
[2]. 循环对应型:
此时:opacity和width过渡时间为2s,left和height过渡时间为4s。
3). transition简写模式:
顺序为:transition-property transition-duration transition-timing-function transition-delay
最近稍微玩了一下CSS几个有用的新特性,
几个新特性的叠加可以产生很强大的效果,
1.CSS3 Transitions 过渡效果
可以很方便地指定两种样式之间的切换过渡效果,
.box:hover{ /* 这里的all是指适用在所有效果,如果想只适用width或者height,直接替换即可,多个效果用“,”隔开 */ -moz-transition: all 800ms; -webkit-transition: all 800ms; -o-transition: all 800ms; -ms-transition: all 800ms; }
以前如果我们要写一个元素移动的动画,
而translate3d是webkit才支持的属性,
.example:hover .translate{ /*这里示例的是2D的translate,参数为x,y,如果用3D则translate3d(x,y,z),但目前只有webkit支持3D*/ -moz-transform: translate(500px,0); -webkit-transform: translate(500px,0); -o-transform: translate(500px,0); -ms-transform: translate(500px,0); }
CSS3提供了几个很有用的属性来改变元素的形状:
.rotate:hover{ -moz-transform: rotate(720deg); -webkit-transform: rotate(720deg); -o-transform: rotate(720deg); -ms-transform: rotate(720deg); }
Transform
在部分的test case当中,每每演示transform属性的,看起来好像都是带动画。这使得小部分直觉化思维的人(包括我)认为transform属性是动画属性。而恰恰相反,transform属性是静态属性,一旦写到style里面,将会直接显示作用,无任何变化过程。transform的主要用途是用来做元素的特殊变形,对于做设计的人来说并不是很陌生,简单的来说就是css 的图形变形工具。
关于图形变形的基础条件当中的原点设定,在css里面使用的是transform-origin来定义的。这个定义的原点应该是该css作用的元素的左上角为0,0来计算的(有待研究)。其他的属性则根据这个属性来计算进行计算。
关于图形变化的模式,css3标准当中transform-style来定义。默认是flat,展现出来的是简单的效果。而preserve-3d则将空间呈现为3d模式。从正常的思维来说,应该只需要preserve-3d就好了,但是从谣传“开启了perserve-3d就使用了GPU加速”来说,这个属性可能是为了降低系统消耗用的,毕竟3d比2d要多一个维度的计算。
如果需要使用3d模式,必须先指定style为3d,并在任意父元素上增加 perspective
及 perspective-origin
来指定透视点。
具体的给设计师改变元素样式用的属性则有以下五个:
translate3d(x,y,z)
是用来控制元素的位置在页面上的三轴的位置的;rotate(deg)
是用来控制元素旋转角度的;skew[x,y](deg)
这个属性是用来制作倾斜度的,做过设计的人可能会知道,这个是用来在2d里面创建3d透视图的时候必须的属性;scale3d(x,y,z)
用来放大缩小效果,属性是比值;matrix3d
,css矩阵。通过这个矩阵属性,涵盖了上面所有的属性值,但是个人觉得可读性极差(全都是数字和单位,背起来有点模糊),目前没有理由推荐使用。
总体看来 css transform的属性和原来使用的left ,right ,top, bottom 的属性从动静角度来说没有任何区别,因此使用的时候应该将transform归类到这类定位变形的静态属性里面。
Transition
transition属性是一个简单的动画属性,非常简单非常容易用。可以说它是animation的简化版本,是给普通做简单网页特效用的。比如你有如下两个样式:
.position{ left:100px; top:100px;}.animate{ -webkit-transition:left 0.5s ease-out; left:500px; top:500px;}
其中animate的transition的属性的意思说:当你的left属性发生变化的时候,执行动画效果(仅仅基于left的属性变化,其他的属性不会加入到动画变化里面去);
首先你的元素的css为position。当你将其cssList 增加 animate 或者替换position 为animate的时候,元素的属性变化,触发webkit-transition,以指定属性变化前的值为起始值,变化后的属性为结束值,执行动画效果。这是一个简单的两点变化过程,大大简化了animation属性的复杂程度。
同时,如果在transition的动画当中,属性值有了新的变化,则会中断当前的动画执行,并将中断时的属性值提供给新的动画作为起始值来计算新的动画效果。
我在css编写的时候,因为变化的属性只有transform一个,因此在transtion属性里面指定响应属性为all,可以响应并执行元素所有属性的变化动画(能做动画的属性)。
Animation
在官方的Introduction上介绍这个属性是transition属性的扩展。但是这个简单的介绍里面包含了不简单的东西:keyframes
。
做过Flash动画的人都会知道,Flash里面有两个基础武器:时间轴和关键帧。而css keyframes的出现,则是提供了flash世界里面的这两个属性的合集。看一个简单的 keyframes 的示例:
@keyframes 'wobble'{ 0%{ left:100px} 30%{ left:300px;} 100%{ left:500px;}}.animate{left:100px; -webkit-animation:wobble 0.5s ease-out; -webkit-animation-fill-mode:backwards;}
上面这个代码展示了一个keyframes 'wobble'
,其中 0%
代表在变化中不同时间点的属性值,你可以较精确的控制动画变化中任何一个时间点的属性效果。而animation则根据这个keyframes提供的属性变化方式去计算元素动画当中的属性。与 transition 不同的是,keyframes提供更多的控制,尤其是时间轴的控制,这点让css animation更加强大,使得flash的部分动画效果可以由css直接控制完成,而这一切,仅仅只需要几行代码,也因此诞生了大量(比起flash来说算是大量了)基于css的animation tools,用来取代flash的动画部分。关于动画工具,可以参考Web standards-based Animation Tools.
另外在animation属性里面还有一个最重要的就是:animation-fill-mode
,这个属性标示是以(from
/0%
)指定的样式 还是以(to
/100%
)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式,保证动画的整体连贯。
- box-shadow,translate translate transition的区别
- transition、translate、transform、animation的区别
- css3 transform transition translate animatiion 区别
- translate和replace 的区别
- translate
- translate
- translate
- translate
- translate
- translate
- translate
- translate
- translate
- TRANSLATE
- translate
- translate
- translate
- Translate
- 如何利用Python判断一个字符串是合法ip
- 面向切面编程(AOP)各种麻烦的验证一键搞定
- java获得一个目录下的所有文件,和固定后缀的文件
- R语言list的用法
- codeforces 858F Wizard's Tour
- box-shadow,translate translate transition的区别
- Java与C通过JNI指针相互传递
- Redis主从同步原理
- 对CAD文件进行版本转换怎么设置格式
- 解决虚拟机克隆之后无法联网的问题
- 第一章 Shiro简介
- umeng第三方登录,分享
- Rancher的优点及不足
- 第2章 开锋你的绝世名刃—— Visual Studio 开发环境的安装、配置