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;
}

html5+css3杂记的更多相关文章

  1. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  2. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  3. 01.Web大前端时代之:HTML5+CSS3入门系列~初识HTML5

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...

  4. 02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  5. 03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

  6. 04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...

  7. 05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...

  8. 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  9. 08. Web大前端时代之:HTML5+CSS3入门系列~H5 Web存储

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html  

随机推荐

  1. vue.js中的路由vue-router2.0使用

    在我们平时工作中,我们有时候会有需求,按照不同的规则,加载不同的组件,页面不去跳转,常见的操作是ajax的异步操作,实现局部刷新加载新数据 在vue中,我们写了很多不同的组件,这时候,实现不刷新调用新 ...

  2. 藏妹子之处(excel)

    问题描述: 今天CZY又找到了三个妹子,有着收藏爱好的他想要找三个地方将妹子们藏起来,将一片空地抽象成一个R行C列的表格,CZY要选出3个单元格.但要满足如下的两个条件: (1)任意两个单元格都不在同 ...

  3. MYSQL常用的性能指标

    (1) QPS(每秒Query量) QPS = Questions(or Queries) / seconds mysql > show  global status like 'Questio ...

  4. 晶振虚焊导致TI 28335 DSP 烧写FLASH后,连接仿真器时正常工作,拔掉仿真器却不能启动运行

    遇到个诡异的问题,28335的DSP,之前程序调试一切正常,但是烧写FLASH后,拔掉仿真器却始终部工作. 解决思路: 1) 检查配置文件貌似没什么问题,复制到其他工程,在开发板上拔掉仿真器启动正常. ...

  5. 超简单的vue2.0分页组件

    1.组件代码 <template> <div class="pagination_comment_style" style="width: 100%;o ...

  6. 猫猫学iOS 之CoreLocation反地理编码小Demo输入经纬度得到城市

    猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 一:效果 输入经纬度,能够得到相应的地名 二:思路 跟地里编码差 ...

  7. &#39;IOKING&#39; TCP Transmission Server Engine (&#39;云猴&#39;&#169;TCP通讯server引擎)(预告版)

    关键词: IOKING IOCP TCP  Transmission Server Engine Lock Free Interlocked 云猴完毕portTCP通讯server引擎 无锁 原子锁( ...

  8. linux下误删数据文件恢复

    linux下文件被删除能够用非常多工具进行恢复.比如undelete(适合ext2,ext3).giis(不能恢复安装giis之前的文件).ext3grep(仅限ext3).R-linux(支持ext ...

  9. 5313 [JL]判断邮箱地址 升级版

    5313 [JL]判断邮箱地址 升级版  时间限制: 1 s  空间限制: 1000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 正确的邮箱地 ...

  10. BusyBox telnetd配置

    配置telnetd遇到的一些坑,记录一下 BusyBox版本1.22.1 Networking Utilities -->[*] telnetd 错误1: Escape character is ...