css3常用的属性总结

1.transition: all 0.4s ease-out 0s;
linear  平均速度
ease  快启动,慢停止,物理原则
ease-in  先慢,后快
ease-out  先快,后慢
ease-in-out  先慢,再快,再慢停止

2.opacity
规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。

3.RGBA(0,0,0,0)调色
前三个值(红绿蓝)的范围为0到255之间的整数或者0%到100%之间的百分数。这些值描述了红绿蓝三原色在预期色彩中的量。第四个值,alpha值,制定了色彩的透明度/不透明度,它的范围为0.0到1.0之间,0.5为半透明。比如,如果你想要纯粹的红色作为背景色,你就可以设置为100%红,0%绿和0%蓝。
     rgba(255, 255, 255, 0)则表示完全透明的白色
     rgba(0, 0, 0,1 )则表示完全不透明度的黑色,喜欢的颜色:rgba(144, 238 ,144, 0.5)//半透明的青苹果绿,rgba(255,252,153,0.5)//暖黄色
4.z-index
0-999优先级叠层显示

5. white-space 属性
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列,但是正常地进行换行。
pre-line	合并空白符序列,但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值

6. text-transform 属性
none	    默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母,仅有小写字母。
inherit	    规定应该从父元素继承 text-transform 属性的值。

7.transform 属性
none	定义不进行转换。	测试
matrix(n,n,n,n,n,n)	定义 2D 转换,使用六个值的矩阵。	测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换,使用 16 个值的 4x4 矩阵。	
translate(x,y)	定义 2D 转换。	测试
translate3d(x,y,z)	定义 3D 转换。	
translateX(x)	定义转换,只是用 X 轴的值。	测试
translateY(y)	定义转换,只是用 Y 轴的值。	测试
translateZ(z)	定义 3D 转换,只是用 Z 轴的值。	
scale(x,y)	定义 2D 缩放转换。	测试
scale3d(x,y,z)	定义 3D 缩放转换。	
scaleX(x)	通过设置 X 轴的值来定义缩放转换。	测试
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。	测试
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。	
rotate(angle)	定义 2D 旋转,在参数中规定角度。	测试
rotate3d(x,y,z,angle)	定义 3D 旋转。	
rotateX(angle)	定义沿着 X 轴的 3D 旋转。	测试
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。	测试
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。	测试
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	测试
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。	测试
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。	测试
perspective(n)

8.text-decoration 属性
none	    默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	    定义闪烁的文本。
inherit	    规定应该从父元素继承 text-decoration 属性的值。

9.animation 属性是一个简写属性,用于设置六个动画属性:
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

10.





  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值