CSS3学习笔记

input:
    text
    button
    submit
    password
    reset
    radio
    checkbox

email: 邮件格式的输入框;自带校验功能;

tel: 电话号码;

number: 数字;
    min="0":最小值;
    max="10":最大值;
    step="2":每次增加2个数字;

date: 日历;

time:时间;

week:第几周

month: 月份;

datetime-local:本地时间;

color:颜色

search:搜索

range:滑块;

新增表单属性：
    autofocus: 自动聚焦;

    placeholder="": 文字提示信息;

    autocomplete="on/off": 开启/关闭自动搜索功能;

    required: 必填项;

    pattern="正则表达式";这里面的正则表达式不用写'//',直接写规则即可;
        /\w+@[a-z0-9]+(\.[a-z0-9]{2,7}){1,2}/

json序列化:
    var json={a:1,b:2,c:3}
    JSON.stringify(json)--->{"a":1,"b":2,"c":3}

json反序列化：
    var str = '{"a":1,"b":2,"c":3}';
    console.log(JSON.parse(str));{a: 1, b: 2, c: 3};

window.onstorage:当存储的值发生变化的时候触发;
    alert(ev.key):发生变化的值的key;

input="file" multiple:同时上传多个;
var aFile = ev.srcElement.files:类数组,获取到的是多个;
    aFile.length:  上传文件的个数;
    oFile.type:文件的类型;
    oFile.size:文件的大小;
    oFile.name:文件的名字;

ondragenter:进入到目标点的时候触发;

ondragover:在目标点上悬停的时候触发;

ondragleave: 在目标点上离开的时候触发;

ondrop: 在目标点上释放鼠标的时候触发; 在使用此事件之前必须把ondragover事件干掉;

var aFile = ev.dataTransfer.files;//ev.srcElement.files:类数组,获取到的是多个;
var oFile = ev.dataTransfer.files[0];//针对第0个;

oFile.name:文件名字;
oFile.type:文件类型;
oFile.size:文件大小;


var reader = new FileReader();
reader.readAsText(要读取的文件名,'utf-8');//以utf-8的编码格式读取文件
reader.onload = function(){//文件读取状态;
    alert(reader.result);//读取文件内容;
}
-----------------------------------------------------------------------
CSS3新增属性很多不兼容,如果不兼容,加浏览器前缀解决;
-webkit-:chrome,safari,opera,
-moz-:FireFox,
-ms-:IE;

transform:
    rotate(50deg):旋转50度;

动画:
    基础动画[过度]:要运动[过渡]谁,就加给谁;不兼容;
        transition: all[要过渡的属性]  1s[过渡完成的时间]   ease[运动形式],linear,ease-in,ease-out,ease-in-out;

        需要运动多个属性的时候,以逗号隔开:
            transition: width 1s ease, height 2s linear, opacity 3s ease-in;

    高级动画：
        keyframes & animation:
        -webkie-@keyframes 运动的名字 {
            运动的规则;
        }

        animation: 运动的名字 时间 运动形式 是否重复[反向]运动;