note2

transform的四个基本转换

转换

• 缩放 scale
• 位移 translate
• 旋转 rotate
• 倾斜 skew
  以上四种转换方式是比较特殊，其实他们都是由 matrix 矩阵

动画速度

• ease 先快后慢 最后非常慢
• linear 匀速
• ease-in 速度越来越快
• ease-out 速度越来越慢
• ease-in-out 速度先快后慢
  以上五种动画速度是比较特殊，其实他们都是由 贝塞尔曲线 来的

3d转换 translate3d rotate3d

2d转换和3d转换区别：
1.除了多了一个参数表示3d
2.在移动端使用3d转换可以优化性能（如果设备有3d加速引擎 GPU 可以提高性能 ,是2dz转换是无法调用GPU）

www.css88.com前端网站

background: url("../cart/imges/06-bg.png) no-repeat 25% bottom / 800px 300px;
上面代码的背景大小为w 800 h 300;
/*1.背景图的定位百分比不是按照容器的大小去换算的*/
/*2.百分比的背景定位： 基于 （容器的宽度-背景的宽度）*25% */
具体在小项目的第六个屏幕

转换过后就会提高他的层级

.screen06.now  .personImg{
    transform:  none; 
    right: 120px;
    /*可以执行第一个动画，在执行下一个动画*/
    /*过度一下*/
	transition: transform 1s linear 5.5s，right 0.5s linear 6.5;
}
在一个transition中执行多个动画 如上 需要过度 /*注意一点：需要不同样的属性状态改变*/  right和transition

让元素一个个出来
css中的写法是.
screen07 .star.now img{
opacity: 1;
transition: all 0.3s linear;
}
然后在jq中控制时间
$(this).css('transition-delay',i*0.5+'s');
注意需要加上now类名，触发条件是当离开第六页带第七页的时候

自定义属性的命名规则 使用 data-userName

//获取属性值 1

<div id="text" value="黑哒哒的盟友"><div>

jQuery取值： $("#text").attr("value");

 

//获取自定义属性值 2

<div id="text" value="123"  data_obj="黑哒哒的盟友"><div>

JQUERY取值：$("#text").attr("data_obj");

 

//获取data值 3

<div id="text" value="123"  data-name="黑哒哒的盟友"><div>

JQUERY取值：$("#text").data("name");

设置自定义属性的值
$("#text").data("name"，"value");

h5获取自定义属性

dataset式自定义属性的集合

    var div = document.querySelector('div');
    /*获取所有  $('div').data() */
    var set = div.dataset;
    /*获取单个自定义属性  $('div').data('user')*/
    /*var user = set.user;
    var user = set['user'];*/
    
    在这里面中 dataset相当于获取到了这个div对象里面所有的自定义属性
    data获取的是单个自定义属性
    设置单个属性的值
div.dataset.user = "gg"；通过找到自定义属性集合
div.dataset点出具体的自定义属性的名称直接设置属性值

jq的data是操作内存

h5的dataset是操作dom的

操作内存的在dom上没有直接表现出来

操作dom直接在dom上直接看到了