一.跟目标元素有关的拖拽事件
1.ondragenter:代表有元素拖进来触发,只触发一次,进来一次触发一次
2.ondragleave:代表有元素从我这离开触发,只触发一次,出去一次触发一次
3.ondragover: 代表有元素在我的范围内不断触发(一般用这个事件只是为了配合ondrop使用,在里面阻止事件默认行为让元素允许能被拖进来)
4.ondrop:有元素拖拽到我的范围内松手触发的事件。但是这个事件要想能被触发,必须先写ondragover事件,并且再over事件里阻止事件默认行为
二.3维坐标系
X:水平的轴;
Y:垂直的轴;
Z:前后的轴.
下面给一张形象图来说明:(网格代表电脑屏幕)
三.3维旋转
3维旋转的效果图如下:
它各自的介绍如下:
X轴旋转:上下旋转,想到单杠,格式:rotateX(度数)
Y轴旋转:左右旋转,想到钢管舞,格式:rotateY(度数)
Z轴旋转:顺时针或者逆时针旋转,想到大风车,格式:rotateZ(度数)
使用案例:transform: perspective(300px) rotateX(45deg);
perspective是设置视距,如果想要效果明显一点就要加一个视距,而且视距遵循近大远小的特点,距离越近,效果越明显,距离越远效果越不明显.
视距总结:以后视距要加在父元素身上会更像真实看到的场景
四.3维平移
x轴:左右走;
y轴:上下走;
z轴:前后走;
使用案例:transform: translateX(100px);向x轴平移100px
五.transform-style属性
默认没有开启3d立体显示,所以要给这个属性,并且给一个值:preserve-3d;
六.animation属性:
使用案例:
animation: bigger 1s 0.5s linear 2 forwards alternate running;
解释:
参数1:剧本的名字(动画名)
参数2:动画时长
参数3:延迟时间
参数4:运动曲线 linear匀速 steps()分步骤
参数5:动画次数,如果为infinite代表无限次
参数6:默认动画结束后会复原,forwards代表停留在动画最终效果上
参数7:如果动画次数有N次的时候,在动画完了进行下一次动画之前会闪现回原来的样子没有动画效果
加一个alternate可以让复原时也有动画效果,但是它会占用动画次数
参数8:代表动画播放状态,默认是running(播放动画)
以上参数不用特意去记顺序,因为它们随便写顺序都可以,但是先写的时间一定是动画时长,后写的是延迟时间
因为它们没有顺序,所以以后需要什么效果,想到什么就写什么
例如:我想无限,我就写一个infinite
我想复原时也有动画,就写一个alternat
reverse:代表反转(先闪现到动画最终样子,然后用动画效果复原到自己本身的值)
alternate-reverse:还是反转,只是如果有多次动画,返回时也会有动画效果
normal:默认值,就是动画该怎样就怎样,相当于你没写参数
我想最终停在动画最终的效果,就写一个forwards
总结四个特殊单词:
alternate:代表让元素复原时也有动画, 它占用一次动画效果
forwords:停在动画最终效果上
running:默认值,播放动画
paused:暂停动画
七.弹性布局
弹性布局:会让子元素在主轴方向依次排列
弹性布局设置操作:
display: flex;
下面解释各自属性
justify-content:设置元素在主轴方向的排列方式
flex-start:在主轴起点对齐
flex-end:在主轴终点对齐
center:在主轴居中
space-around:元素和元素之间有间距,两边也有间距
space-between:元素和元素之间有间距,两边没有间距
flex-direction:设置主轴为哪个轴
row:默认值,代表x轴为主轴
column:代表y为主轴
row-reverse:还是以x为主轴,起点和终点会调换 一般不会用
column-reverse:还是以y为主轴,起点和终点会调换 一般不会用