空间转换
空间转换位移:
-
transform:translate3d ( x, y, z) -
transform:translateX ( ) -
transform:translateY ( ) -
transform:translateZ ( )
将元素相对自身原本位置的坐标轴进行移动
电脑屏幕水平为X轴(+→-←),垂直为Y轴(+↓-↑),电脑屏幕到使用者的方向为Z轴(+近-远)
简写时三个值都要写,没有移动写0
透视(视距):
-
perspective:值
取值通常为800--1200,单位为px
立体呈现:
-
transform-style:perserve-3d
指定子元素定位在三维空间内
旋转:
-
transform:rotateX( ) -
transform:rotateY( ) -
transform:rotateZ( )
取值为正:顺时针旋转 取值为负:逆时针旋转
单位:角度(deg) 圈(turn)
改变旋转中心点:
-
transform-origin:原点水平位置 原点垂直位置
缩放:
-
transform:scale(x缩放的倍数,y缩放的倍数)
通常只给一个值,另外一边进行等比缩放
渐变色:
-
background-image:linear-gradient (to right,颜色1,颜色2......)
to left：设置渐变为从右到左。相当于: 270deg
to right：设置渐变从左到右。相当于: 90deg
to top： 设置渐变从下到上。相当于: 0deg
to bottom：设置渐变从上到下。相当于: 180deg
动画
动画效果:
-
@keyframes 动画名称 {
动画开始:form/0%{
}
动画结束:to/100%{
}
}
应用动画效果:
-
animation:动画名称 动画时长(s) 速度曲线(linear 匀速) 延迟时间 重复次数(infinite 无限循环) 动画方向(reverse 反方向运行,alternate 现正常运行再反方向运行) 结束后以何种状态显示(forwards 结束时状态,backwards 开始时状态) -
animation-play-state:paused 暂停动画,通常搭配:hover使用 -
steps(数字):逐帧动画,数字代表多少帧,常用于精灵图动画,搭配精灵图使用
动画名称和动画时长必须赋值,取值不分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
多个动画效果以逗号隔开: animation:动画1 时长 速度... ,动画2... ,动画3......
结束时状态无法与infinite 无限循环和动画方向同时应用
