网站建设与管理好吗,三亚,推荐晚上用的网站,怎样用word2003做网站CSS3的过渡和转换
1.过渡 什么是过渡呢#xff1f;过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果。 过渡的属性#xff1a;
属性 描述csstransition简写属性#xff0c;用于在一个属性中设置4个过渡属性3transition-property规定应用过渡的css属性的名称…CSS3的过渡和转换
1.过渡 什么是过渡呢过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果。 过渡的属性
属性 描述csstransition简写属性用于在一个属性中设置4个过渡属性3transition-property规定应用过渡的css属性的名称3transition-duration定义过渡效果所花费的时间。默认为03transition-timing-function规定过渡效果的时间曲线。默认是“ease”3transition-delay规定过渡效果何时开始。默认是 0 3 transition:是一个简写属性用于设置四个过渡属性所以说我们用的时候只写这个属性就行了。 transition-property规定应用过渡效果的属性可以设置单个属性也可以写所有属性all。请始终设置这个属性否则忽略这个属性。就像你想给你的心上人打电话但是你不知道TA的手机号你能给他打电话吗 transition-duration规定完成效果所需要的时间以秒或者毫秒来计算。这个也是必须写的属性假如没有就不执行因为默认值为 0 transition-timing-function规定过渡效果的速度曲线。默认是“ease”。他有6个字属性 linear 规定以相同的速度开始至结束的过渡效果。 ease 规定慢速开始然后变快然后慢速结束的过渡效果。 ease-in 规定以慢速开始的过渡效果 ease-out 规定以慢速结束的过渡效果 ease-in-out 规定以慢速开始和结束的过渡效果 cubic-bizier(n,n,n,n) 在cubic-bezier函数中定义自己的值。可能是值范围为 0~1 之间 transition-delay:规定过渡效果从何时开始即我们常说的延时。 效果0.6s后开始执行过渡效果。 代码 1 !DOCTYPE html2 html langen3 head4 meta charsetUTF-85 title过渡效果/title6 style typetext/css7 .square{8 width: 100px;9 height: 100px;
10 background: red;
11 transition: width 0.4s linear 0.6s;/*规定属性width 0.4s 匀速 完成过渡效果 延时0.6s完成*/
12 }
13 .square:hover{width: 300px;}
14 /style
15 /head
16 body
17 div classsquare/div
18 /body
19 /html 2.转换 转换向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动、或者倾斜。 属性 1.转换 nooe 不进行转换 matirx(n,n,n,n,n,n) 定义转换使用6个值的距阵 matirx3d(n,n,n,n,n,n,n,n,n,n,n,n) 定义3d转换使用16个4*4的矩阵 二维矩阵matirx(n,n,n,n,n,n) 就是基于水平方向和垂直方向重新定位元素 三维矩阵matirx(n,n,n,n,n,n) 就是基于 XYZ 三个方向重新定位元素 此属性涉及数学中的矩阵我在这里这是点一下就好。 2.移动 translate(x,y) 定义2d移动即可向左右、上下移动 translate3d(x,y,z) 定义3d移动x y z 3个方向转动 translate(x,y) 平面移动X为x轴方形移动正为向右负为向左。Y为y轴移动正为向下负为向上 translate3d(x,y,z) 同 translate(x,y)一样只不过多了一个z轴移动 3.缩放 scalex,y) 定义2d缩放 scale3d (x,y,z) 定义3d缩放 4.旋转 rotate(x,y) 定义2d旋转 rotate3d(x,y,z) 定义3d旋转 缩放和移动就很简单了大家从字面上就可以理解。 因为这个只是在给大家举例子所一说我就没有加前缀希望大家在写的时候加上前缀。谢谢大家
