毕业答辩一耽误就是一个月的时间，感觉自己浪费好多时间，而且学习劲头都没有以前的好，学习是个漫长艰苦的事情，也出现了好多问题，希望自己有则改之，无则加冕，曾国藩曾说过：悔者，所以守其缺而禾取求全也。虽然有遗憾有不足，也希望自己能够不断完善自身及修养。（对了还有个问题找一个时间，每天自己学习新的知识）。
进入正题吧
trasition（过渡）
根据中文意思过渡，就会想到，无论你是点击，焦点等事件，它是平滑改变其属性。
trasiton属性是复合属性，trasition（property duration timing-function delay ）；
- transition-property ：规定设置过渡效果的css属性名称；子属性包含三个值：no没有属性名，all所有属性获得过渡效果，property定义css属性名；
- transition-duration ：规定完成过渡效果需要多少秒或毫秒（time）；
- transition-timing-function ：指定过渡函数，规定速度效果的速度曲线time(子属性具体属性如下）；
- transition-delay ：指定开始出现的延迟时间（time）；
默认值分别为：all 0 ease 0 ；
注：transition-duration 时长为0，不会产生过渡效果；
transition-timing-function是transition中让人有疑惑的地方，说一下记住就好。
linear规定以相同速度开始至结束的过渡效果。
ease规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in规定以慢速开始的过渡效果。
ease-out规定以慢速结束的过渡效果。
ease-in-out规定以慢速开始和结束的过渡效果.
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transform变换
transform主要分5类的值。转换，缩放，旋转，倾斜，透视。在JavaScript中语法是这样的object.style.transfrom=值
值都有这些
转换：matrix（n.n.n.n.n.n）定义2D转换，6个值得矩阵
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)转换只用于z轴
缩放 ：scale(x,y)定义2D缩放
scale3d(x,y,z)定义3D缩放
scaleX(x)通过x轴的值来进行缩放
scaleY(y)通过y轴的值来进行缩放
scaleZ(z)通过z轴的值来进行缩放
旋转：rotate(angle)定义2D旋转
rotate3d(x,y,z,angle)定义3D旋转
rotateX(angle)定义沿X轴进行旋转
rotateY(angle)定义沿y轴进行旋转
rotateZ(angle)定义沿z轴进行旋转
倾斜：skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skew(x-angle)定义沿着 X 轴的 2D 倾斜转换。
skew(y-angle)定义沿着 Y 轴的 2D 倾斜转换。
透视：perspective(n)为 3D 转换元素定义透视视图。
animation动画
语法： animation: name duration timing-function delay iteration-count direction;
animation-name:规定需要绑定到选择器的 keyframe 名称。
animation-duration:规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-funcition:规定动画的速度曲线.
animation-delay:规定在动画开始之前的延迟。
animation-iteration-count:规定动画应该播放的次数。
animation-direction:规定是否应该轮流反向播放动画。
扫一扫
705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
