转换

什么是转换

改变元素在页面中的位置，大小，角度，以及形状即为转换

转换分类

2D转换：平面

元素在x轴和y轴发生转换的效果

3D转换：空间

元素在x轴、y轴和z轴发生转换的效果

transform

多个转换函数之间用空格隔开

2D转换取值

旋转

​ rotate(n deg)
​ n为正数顺时针旋转
​ n为负数逆时针旋转

倾斜

​ skew()
​ skew(x)
​ x取正，y轴逆时针倾斜
​ x取负，y轴顺时针倾斜
​ skewY(y)
​ y取正，x轴顺时针倾斜
​ y取负，x轴逆时针倾斜

缩放

​ scale()
​ scale(n)
​ n>1
​ x轴和y轴都放大
​ n=1
​ x轴和y轴保持原尺寸
​ 0<n<1
​ x轴和y轴都缩小
​ -1<n<0
​ x轴和y轴都缩小，并反转
​ n<-1
​ x轴和y轴都放大，并反转
​ scale(n1,n2)
​ 分别设置x轴和y轴的缩放
​ scaleX(n)
​ 单独设置x轴缩放
​ scaleY(n)
​ 单独设置y轴缩放

位移

​ translate()
​ translate(x,y)
​ 指定元素在x轴和y轴上的位移
​ translate(x)和translateX(x)
​ 指定元素在x轴上的位移
​ translateY(y)
​ 指定元素在y轴上的位移

3D转换取值

透视距离

​ 什么是透视距离？
​ perspective
​ 取值

3D旋转

​ rotateX(xdeg)
​ rotateY(ydeg)
​ rotateZ(zdeg)
​ rotate3D(1,1,1,45deg)

3D位移

​ translateX(n)
​ translateY(n)
​ translateZ(n)
​ translate3D(100px,100px,200px)

3D缩放

​ scaleX(n)
​ scaleY(n)
​ scaleZ(n)
​ scale3D(.5,.4,.8)

过渡

什么是过渡？

使css的值，在一段时间内平缓变化的效果。过度的代码要写在原本样式中，过渡效果有去有回，如果写在hover中，过渡效果有去无回

transition属性

注意：

1. 使用过渡，要设置两个css的状态(开始的值和结束的值)
2. 过渡代码的编写位置，写在原来选择器中，过渡效果，有去有回，如果写在hover中，过渡效果，有去无回

transition-property

​ transition-property取值
​ 1. all
​ 2. 支持过渡的属性
​ 颜色
​ 多数取值为具体数字的属性
​ 阴影
​ transform
​ visibility

transition-duration

​ transition-duration取值
​ s/ms为单位的数字

transition-timing-function

​ transition-timing-function取值
​ 1. 关键字
​ ease
​ linear
​ ease-in
​ ease-out
​ ease-in-out
​ 2. 贝塞尔曲线函数
​ cubic-bezier(0.0.0.0)
​ cubic-bezier(0.57.0.05.0.68.0.19)：自由落体

transition-delay

​ transition-delay取值
​ 以s/ms为单位的数字

简写：transition : property duration timing-function delay

动画

什么是动画

什么是关键帧

声明动画

使用动画

使用的动画名称

​ animation-name: 动画名称

设置动画执行时间

​ animation-duration: n s/ms

设置动画的时间曲线函数

​ animation-timing-function: linear
​ linear
​ ease
​ ease-in
​ ease-out
​ ease-in-out
​ cubic-bezier(n,n,n,n)

设置动画开始时的延迟时间

​ animation-delay: n s/ms

设置动画的播放次数

​ animation-iteration-count:infinite
​ 无单位的整数，具体的播放次数
​ infinite

设置动画的播放顺序

​ animation-direction:alternate
​ normal
​ reverse
​ alternate

设置动画在播放之前，和播放之后的状态

​ animation-fill-mode:forwards
​ none
​ backwards
​ forwards
​ both

鼠标悬停，动画暂停

​ animation-play-state
​ paused
​ running

动画的兼容性

​ 为兼容不同版本浏览器，需要在动画声明@keyframes之前添加前缀
​ @keyframes 动画名称{}
​ -webkit-
​ @-webkit-keyframes 动画名称{}
​ -o-
​ @-o-keyframes 动画名称{}
​ -ms-
​ @-ms-keyframes 动画名称{}
​ -moz-
​ @-moz-keyframes 动画名称{}

简写动画

​ animation : name duration timing-function delay count direction
​ animation: name duration;

个人

以上是试着用Markdown重新编写记录的结果，希望我对这个软件能够更加熟练的运用