H5C3新特性总结(三)

一.跟目标元素有关的拖拽事件

1.ondragenter:代表有元素拖进来触发,只触发一次,进来一次触发一次
2.ondragleave:代表有元素从我这离开触发,只触发一次,出去一次触发一次
3.ondragover: 代表有元素在我的范围内不断触发(一般用这个事件只是为了配合ondrop使用,在里面阻止事件默认行为让元素允许能被拖进来)
4.ondrop:有元素拖拽到我的范围内松手触发的事件。但是这个事件要想能被触发,必须先写ondragover事件,并且再over事件里阻止事件默认行为

二.3维坐标系

   X:水平的轴;
   Y:垂直的轴;
   Z:前后的轴.           

下面给一张形象图来说明:(网格代表电脑屏幕)
H5C3新特性总结(三)_第1张图片

三.3维旋转

3维旋转的效果图如下:
H5C3新特性总结(三)_第2张图片
它各自的介绍如下:

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为主轴,起点和终点会调换 一般不会用

你可能感兴趣的:(七.H5C3新特性)