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

条件注释

html5shiv

拖拽事件

//必须有draggable="true"

//添加和拖拽相关的事件
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读取文件

本地存储localStorage

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

本地存储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;
}