2020.8.18付海政
转换
什么是转换
改变元素在页面中的位置，大小，角度，以及形状即为转换
转换分类
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属性
注意：
- 使用过渡，要设置两个css的状态(开始的值和结束的值)
- 过渡代码的编写位置，写在原来选择器中，过渡效果，有去有回，如果写在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重新编写记录的结果，希望我对这个软件能够更加熟练的运用
评论