html5和css3的笔记

h5+c3

W3C盒子模型和ie盒子模型

文档加上的话，所有浏览器都按照W3C的盒子模型，否则ie会按照ie的盒子模型，它的content包括了padding border

box-sizing: content-box/border-box

text-shadow文字阴影

		/* 
            四个参数： x， y, blur(模糊程度) color
            如果有多个阴影， 用逗号隔开
         */
        text-shadow: -1px -1px 0px white, 1px 1px 0px black;

box-shadow盒子阴影

		/* 
        1. x， y， blur（模糊程度）， 阴影的缩放， 内阴影或外阴影
        2. 内外阴影只有一个参数inset，默认就是外阴影
         */
        box-shadow: 0px 0px 10px 10px grey inset;//内阴影

		box-shadow: 0px 0px 10px 10px grey; //外阴影

linear-gradient 线性渐变

/* 设置渐变 */
/* 默认从上往下发生渐变， 颜色是平均分布的 */
/* background: linear-gradient(red, yellow, steelblue, cyan); */
/* 可以在颜色后面设置颜色的百分比 */
/* background: linear-gradient(red 50%, yellow 70%, steelblue, cyan); */
/* 设置颜色的角度 */
/* background: linear-gradient(90deg,red, yellow, steelblue, cyan); */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 

radial-gradient 径向渐变

/* linear: 线性的， radial: 径向的， gradient: 渐变， ellipse：椭圆 */
/* 半径写在at的前面， 超出半径的区域用最外面的颜色来填充 */
/* background: radial-gradient(100px at left bottom, red, yellow, steelblue); */
    
/* 直接指定圆心的坐标 */
/* 径向渐变的总结： 半径 at 圆心点, 颜色。。。 */
background: radial-gradient(100px at 20% 20%, red, yellow, steelblue);
/* 椭圆 */
background: radial-gradient(100px 50px at 20% 20% , red, yellow, steelblue);
    background: radial-gradient(ellipse closest-side at 30px 50px, red, blue);

border-radius

/* 单独设置某个角： 如果设一个圆角，只需一个参数，如果设椭圆角，需要两个参数，中间用空格隔开 */
border-top-left-radius: 30px 60px; 
/* 所有的x和所有的y 中间用 / 隔开*/
border-radius: 30px 30px 30px 30px/60px 60px 60px 60px;
/*复合写法，只写一， 二， 三对分别代表什么意思*/
/*如果只写一对参数： 对所有的解生效;写两对： 第一对对left，top和right， bottom生效，第二对对right top， left bottom生效；如果写三对， 第一对对left top生效， 第二对对right top, left bottom 生效， 第三对对 right bottom生效*/
border-radius: 30px 80px/ 60px 80px;

background-position & background-size

/* 如果需要设置背景图片的大小，必须指定其位置，大小永远写在位置的后面，用 / 隔开  */
background: url("./img/dog3.jpg") no-repeat center center;
/* 设置背景图片位置, 用得不是很多 */
background: url("./img/dog3.jpg") no-repeat 100px 100px/200px 150px;

多背景实现

background: 
            url("./img/bg1.png") no-repeat top left,
            url("./img/bg2.png") no-repeat top right,
            url("./img/bg4.png") no-repeat bottom left,
            url("./img/bg3.png") no-repeat bottom right,
            url("./img/fox2.jpg") no-repeat 112px 83px/365px 258px;
            ;

transform 变换

li:nth-child(2) {
	/* 变换只会影响到当前元素，不会影响到其它元素， 在动画处理用得比较多 */
	transform: scale(0.5);
}

li:nth-child(3) {
    transform: translate(100px, 200px)
}

li:nth-child(4) {
    transform: rotate(45deg);
}

li:nth-child(5) {
    transform: skew(45deg);
}

transform-origin 变换中心点

transform-origin: left top;

改变三个状态

transform: translate(1400px, -800px) scale(0.2) rotate(45deg);

transform-style 打开3d效果

/* 打开3d效果 */
transform-style: preserve-3d;

perspective 近大远小（父盒子）

如果要对某个元素实现近大远小的效果，就需要对其父元素设置perspective的属性， 越小， 效果越明显

perspective: 500px;

动画

/* 应用动画 */
/* forwards可以保存动画结束之后的状态 */
/* infinite 动画执行无限次 */

animation: name duration timing-function delay iteration-count direction;

animation:rider-shake 0.5s 4, rider-go 4s 2s forwards;

@keyframes rider-go {
   /* from如果没有定义， 它就是初始状态，它就可以省略 */
   from {

   }

   to {
       transform: translateX(-1000px);
   }
}

@keyframes rider-shake {
   /* 此句可以不写 */
   0% {
   		/* 如果零秒是原始状态，可以不写 */
   }
   25% {
        bottom: 21%;
   }

   75% {
        bottom: 19%;
   }

   /* 引句也可不写 */
   100% {
        /* 如果动画还原时和原始状态一致，也可以不写 */
   }
}

分布执行动画

animation: changeBg 0.5s steps(11) infinite, swim 5s infinite forwards;

兼容ie8以下的h5写法

<!--[if lte IE 8]>
    <script src="./js/html5shiv.js"></script>
<![endif]-->

操作类名

classList:

// 给某个元素添加一个类

document.body.classList.add("light");

// 移除某个元素的某个类

document.body.classList.remove("night");

// 切换类， 点一次删除， 再点一次添加， 轮换

document.body.classList.toggle("night");

// 判断是否拥有某个类

var isopen = document.body.classList.contains("light");

拖拽事件

	<h3>从这个盒子</h3>
    <div class="from">
        <div class="move" draggable="true"></div>
    </div>
    <h3>到这个盒子</h3>
    <div class="to"></div>

	
	//添加和拖拽相关的事件
     move.ondragstart = function() {
         console.log("开始拖拽");
     }

     move.ondrag = function() {
         console.log("正在拖拽");
     }

     move.ondragleave = function() {
         console.log("离开");
     }

     move.ondragend = function() {
         console.log("结束拖拽");
     }

// 真正要实现的拖拽的效果，只需要实现这两个方法即可

// drop松手事件应该由将要被拖入的大盒子来监听

    to.ondrop = function() {
        console.log("松手");
        to.appendChild(move);
    }

    //要拖入的大盒子需要实现的方向
    to.ondragover = function(event) {
        // 阻止默认事件（默认是不允许拖入的）
        event.preventDefault();
    }





     to.ondragenter = function() {
         console.log("进入盒子");
     }

    // 如果要往回拖，那么from也需要设置为可以接收， 实现ondragover的事件， 阻止默认值
        // drop松手事件应该由将要被拖入的大盒子来监听
        from.ondrop = function() {
        console.log("松手");
        from.appendChild(move);
    }

    //要拖入的大盒子需要实现的方向
    from.ondragover = function(event) {
        // 阻止默认事件（默认是不允许拖入的）
        event.preventDefault();
    }

拖拽进浏览器

	// 如果想要拖入浏览器打开文件，必须要实现以下两个方法，并且，要阻止其默认事件
    document.ondragover = function(event) {
        event.preventDefault();
    }

    document.ondrop = function(event) {
        event.preventDefault();
    }

	//如果想要拖到浏览器的小盒子里，那么必须把小盒子的默认事件阻止掉
    var box = document.querySelector(".box");

    box.ondragover = function(event) {
        event.preventDefault();
    }
	
	box.ondrop = function(event) {
        event.preventDefault();

        //就可以来读文件
        var file = event.dataTransfer.files[0];
        console.log(file);

        //创建一个filereader 
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(){
            alert("haha");
            console.log(reader.result);
            document.querySelector("img").setAttribute("src", reader.result);
        }
    }
	


	

FileReader

作用:实现上传预览

关键：files[0] FileReader reader.readAsDataURL() reader.onload reader.result

	
	document.querySelector("#file").onchange = function(){
        //1. 拿到file
        var file = document.querySelector("#file").files[0];
        //2. 创建fileReader
        var reader = new FileReader();
        //3. 加载并读取file
        reader.readAsDataURL(file);
        //4. 使用file
        reader.onload = function() {
            console.log(reader.result);
            document.querySelector("img").setAttribute("src", reader.result);
        }
    }

本地存储

localStorage/sessionStorage 方法都一样

	window.localStorage.setItem("myusername", name);
	window.localStorage.getItem("myusername");
	window.localStorage.clear();
	window.localStorage.removeItem("myusername")

video

关键api

1.	video.pause()  
2.	video.play()
3.	video.webkitRequestFullScreen()  //全屏
4.	video.currentTime //当前进度   
5.	video.duration	//总进度

监听方法：

video.ontimeupdate = function(){  }

	<video src="./movie/bglb.mp4"></video>

	var video = document.querySelector("video");

	//1. 判断是否是暂停状态
        if (video.paused == true) {
            //更换按钮
            this.classList.remove("icon-play");
            this.classList.add("icon-pause");

            //播放
            video.play();
        } else {

        }

	//2. 全屏
	video.webkitRequestFullScreen();

	//3. 监听视频进度更新的事件
	//视频的当前时间
    ("当前时间"+video.currentTime);
    // 视频的总时间
    //("总时间"+video.duration);

	video.ontimeupdate = function() {
        var percent = video.currentTime/video.duration * 100 +"%";
        console.log(percent);

        //给进度条添加样式
        document.querySelector(".move").style.width = percent;
    }

	//4. 点击进度条， 更改播放的位置
    document.querySelector(".progress").onclick = function (event) {
        //点击的x坐
        var clickx = event.offsetX;
        console.log(clickx);
        //获取到progress的宽度
        var pw = this.offsetWidth;
        console.log(pw);

        var percent = clickx / pw;
        // 当前的视频的时间点
        var currentTime = percent * video.duration;
        //设给video
        video.currentTime = currentTime;
    }