html5+css3杂记

H5C3个人笔记

before&after

1.	必须有content  display
2.	场景：不想改变html结构；解决浮动

解决浮动：
	2c d h v

transition 过渡

1.	/* transition-property: width, height; */
    /* 如果都是一秒，可以合并写成1秒 */
    /* transition-duration: 1s, 1s;  */
    /* 动画实现的效果 */
    /* transition-timing-function: ease; */
    /* 动画延迟执行时间 */
    /* transition-delay: 0s, 1s; */

2.	合并写法（推荐）
	transition: width 1s ease-in-out, height 1s 1s;

注意：
	加在hover和非hover上的效果不一样

box-sizing盒子模型

W3C和IE的模型
border-box
content-box

text-shadow文字阴影

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

box-shadow盒子阴影

/* 
    1. 六个参数： x， y， blur（模糊程度）， 阴影的缩放， color， 内阴影或外阴影
    2. 内阴影的实现： 先实现反方向的外阴影，加再加一个inset
*/
.box {
   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); 标准的语法 */

参数：
	角度，颜色1（可以带百分比）,颜色2，...

radial-gradient径向渐变

/* 径向渐变的总结： 半径 at 圆心点, 颜色。。。 */

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

border-radius圆角

border-radius: 30px 30px 30px 30px/60px 60px 60px 60px;

背景

让图片居中显示，但不改变图片大小，超过部分不显示
background: url("./img/dog3.jpg") no-repeat center center;

让图片在100px 100px处开始显示（图片的左上角从该点开始），后面的20px 15px代表图片的尺寸，会压缩该图片的尺寸
background: url("./img/dog3.jpg") no-repeat 100px 100px/20px 15px;

多背景的处理
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-origin变换中心点

transform-origin: left top;

transform

transform: scale(0.5);
transform: translate(100px, 200px);
transform: rotate(45deg);
transform: skew(45deg);

打开3d效果

写在元素本身
/* 打开3d效果 */
transform-style: preserve-3d;
/* 值越小，效果越明显 */
perspective: 500px;
1. 如果要能看到某个元素的3d效果，需要开始它： transform-style：preserve-3d
2. 如果要对某个元素实现近大远小的效果，就需要对其父元素设置perspective的属性， 越小， 效果越明显

keyframes动画

语法：

/* @keyframes rider-go {
        0% {
        }
        100% {
            transform: translateX(-1000px);
        }
    } */
    @keyframes rider-go {
        /* from如果没有定义， 它就是初始状态，它就可以省略 */
        from {
        }
        to {
            transform: translateX(-1000px);
        }
    }
    @keyframes rider-shake {
        /* 此句可以不写 */
        0% {
            /* 如果零秒是原始状态，可以不写 */
        }
        25% {
            bottom: 21%;
        }
        75% {
            bottom: 19%;
        }
        /* 引句也可不写 */
        100% {
            /* 如果动画还原时和原始状态一致，也可以不写 */
        }
    }


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

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

animation: 复合写法
anmatiton： boxAnimation 1s linear 2s 10 reverse forwards;
解释： 延迟两秒(2s)， 匀速(linerar) 反方向(reverse) 执行 boxAnimation 动画， 时长为1秒(1s)， 重复10次(10)。

分步动画：

 @keyframes changeBg {
        to {
            background-position-y: -1386px;
        }
    }

 @keyframes swim {
        0% {

        }

        30% {
            transform: translateX(800px);
        }

        50% {
            transform: translateX(800px) rotateZ(-180deg);
        }

        70% {
            transform: rotateZ(-180deg);
        }

        100% {
            /* transform: rotateZ(0deg); */
        }
  }

animation: changeBg 0.3s steps(11) infinite, swim 3s infinite forwards;

flex布局

父容器：

	display:flex

子容器：

	1.	通过flex:1;flex:2来确定份数

	2.	固定分配

	/* 永完固定分配200像素宽度，不管父盒子如何缩放 */
    flex-basis: 200px;

	3.	父容器设置换行

	/* 如果父元素的宽度不够了，就换显示,默认值是nowrap */
	flex-wrap: wrap;

	4.	排列样式

	 /*
        水平方向的分布问题
            * flex-start: 永远贴在左边显示
            * flex-end： 永远贴在右边显示
            * space-around: 每个元素的左右两边的空间相同
            * space-between: 左右两个元素贴边显示，中间元素的间隔相等
     */
     justify-content: space-around;

     /*
        垂直方向的分布问题, 只有对多行才生效
     */
     align-content: space-between;

	5.	每行的对齐方式

	 /*
        具体每一行元素的对齐方式问题：
            * flex-start: 顶对齐
            * flex-end： 底对齐
            * center： 居中对齐
     */
     align-items: center;

	6.	具体某一个元素的对齐方式

	/* 具体的某一行中的某一个元素，它的对齐方式： */
    align-self: flex-end;

	7.	改变排列方向

	/* 设置方轴方向： 按行排列，还是按列来排列， 默认值是row， 想纵排， 就改成column */
    flex-direction:  column;

改变类的api

xxx.classList.add('xx')
xxx.classList.remove('xx')
xxx.classList.toggle('xx')
xxx.classList.contains('xx')

html5新标签

header
nav
aside
section
footer

条件注释

<!-- less than equel 小于等于ie8 -->
<!--[if lte IE 8]>
    <script>
        var header = document.createElement("header");
        //这一句必须要设
        header.style.display = "block";
        document.body.appendChild(header);
    </script>
<![endif]-->

html5shiv

<!-- 如果游览器的版小于等于ie8， 就调用下用的js来创建h5新的标签 -->
<!--[if lte IE 8]>
    <script src="./js/html5shiv.js"></script>
<![endif]-->

拖拽事件

//必须有draggable="true"
<div class="move" draggable="true"></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();
}

拖拽文件到浏览器某个区域

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

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

2.
//如果想要拖到浏览器的小盒子里，那么必须把小盒子的默认事件阻止掉
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读取文件

<script>
    document.querySelector("#file").onchange = function(){
        alert("haha");
        //1. 拿到file
        var file = document.querySelector("#file").files[0];
        console.log(file);
        //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);
        }
    }
</script>

本地存储localStorage

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

<script>
    // 从本地获取到用户名信息
    var myname = window.localStorage.getItem("myusername");
    document.querySelector(".welcome").innerHTML = myname+", 欢迎你再次光临本网站， 么么哒";
    document.querySelector("#name").value = myname;

    document.querySelector("#submit").onclick = function() {
        var name = document.querySelector("#name").value;
        var password = document.querySelector("#password").value;

        if(name.length > 0 && password.length > 0) {
            // 将用户名信息存入到本地
            window.localStorage.setItem("myusername", name);
        } else {
            alert("请输入用户名和密码");
        }
    }
</script>

本地存储sessionStorage

window.sessionStorage.getItem("myusername");
window.sessionStorage.setItem("myusername", name);	

略

获取浏览器的经纬度

//获取经纬度
    window.navigator.geolocation.getCurrentPosition(function (position) {
        // 经度
        var longitude = position.coords.longitude;
        //纬度
        var latitude = position.coords.latitude;
    })

扔到百度地图的api里就可以实现

video音视频播放api

1.	播放、暂停
var video = document.querySelector("video");
//播放
video.play();
//暂停
video.pause();

2.	全屏
// video.requestFullscreen();
// 如果希望某个元素全屏，就直接操作这个元素就可以了。
video.webkitRequestFullScreen();

3.	进度
// 监听视频进度更新的事件
video.ontimeupdate = function() {

    // 视频的当前时间
    // console.log("当前时间"+video.currentTime);
    // 视频的总时间
    //console.log("总时间"+video.duration);

    var percent = video.currentTime/video.duration * 100 +"%";

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

4.	点击进度条快进
//将触发的条件写在进度条身上
document.querySelector(".progress").onclick = function (event) {
    //点击的x坐
    var clickx = event.offsetX;
    //获取到progress的宽度
    var pw = this.offsetWidth;

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