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;
}
html5+css3杂记的更多相关文章
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 01.Web大前端时代之:HTML5+CSS3入门系列~初识HTML5
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...
- 02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...
- 03.Web大前端时代之:HTML5+CSS3入门系列~H5功能元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...
- 04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...
- 05. Web大前端时代之:HTML5+CSS3入门系列~H5 多媒体系
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...
- 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
- 08. Web大前端时代之:HTML5+CSS3入门系列~H5 Web存储
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html
随机推荐
- Leetcode 68.文本左右对齐
文本左右对齐 给定一个单词数组和一个长度 maxWidth,重新排版单词,使其成为每行恰好有 maxWidth 个字符,且左右两端对齐的文本. 你应该使用"贪心算法"来放置给定的单 ...
- java实现WebService 以及客户端不同的调用方式
java 实现WebService 以及不同的调用方式 webservice: 就是应用程序之间跨语言的调用 wwww.webxml.com.cn 1.xml 2. ws ...
- yum 源本地化 (one)
First of all, you need to prepare the rpm packages, we can download them with yum command, in that w ...
- ojdbc.jar
Oracle的jdbc驱动是ojdbc.jar 文件,那么mysql的jdbc驱动是什么呢? 匿名 | 浏览 689 次 发布于2015-06-07 02:06 最佳答案 MySQL的JDBC ...
- nodejs fs.open
fs.open(path, flags, [mode], [callback(err, fd)])是 POSIX open 函数的封装,与 C 语言标准库中的 fopen 函数类似.它接受两个必选参数 ...
- Linux下C++访问MySQL数据库
由于想要开始了解并学习用LAMP进行web开发,所以昨晚我在Fedora上安装了MySQL,学习了MySQL的几个常用命令.想着在学习进行web开发(PHP访问数据库)之前,先用我熟悉的C++连接数据 ...
- Javascript中双等号(==)隐性转换机制 JS里charCodeAt()和fromCharCode()方法拓展应用:加密与解密
Javascript中双等号(==)隐性转换机制 在Javascript中判断相等关系有双等号(==)和三等号(===)两种.其中双等号(==)是值相等,而三等号(===)是严格相等(值及类型是否 ...
- 写给小白的JVM学习指南
Java 虚拟机是学习 Java 的基础,也是迈入高级 Java 开发工程师的必备知识点.所以今天这篇文章我们来聊聊如何从零开始学习 Java 虚拟机. 基础 对于刚刚接触 JVM 的同学来说,JVM ...
- linux /proc/stat 文件说明
/proc/stat 文件内容 # cat /proc/stat cpu 1411 1322 3070 1193539 2790 0 268 0 0 0 cpu0 472 658 787 297933 ...
- LeetCode 720. Longest Word in Dictionary (字典里最长的单词)
Given a list of strings words representing an English Dictionary, find the longest word in words tha ...