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
随机推荐
- vue.js中的路由vue-router2.0使用
在我们平时工作中,我们有时候会有需求,按照不同的规则,加载不同的组件,页面不去跳转,常见的操作是ajax的异步操作,实现局部刷新加载新数据 在vue中,我们写了很多不同的组件,这时候,实现不刷新调用新 ...
- 藏妹子之处(excel)
问题描述: 今天CZY又找到了三个妹子,有着收藏爱好的他想要找三个地方将妹子们藏起来,将一片空地抽象成一个R行C列的表格,CZY要选出3个单元格.但要满足如下的两个条件: (1)任意两个单元格都不在同 ...
- MYSQL常用的性能指标
(1) QPS(每秒Query量) QPS = Questions(or Queries) / seconds mysql > show global status like 'Questio ...
- 晶振虚焊导致TI 28335 DSP 烧写FLASH后,连接仿真器时正常工作,拔掉仿真器却不能启动运行
遇到个诡异的问题,28335的DSP,之前程序调试一切正常,但是烧写FLASH后,拔掉仿真器却始终部工作. 解决思路: 1) 检查配置文件貌似没什么问题,复制到其他工程,在开发板上拔掉仿真器启动正常. ...
- 超简单的vue2.0分页组件
1.组件代码 <template> <div class="pagination_comment_style" style="width: 100%;o ...
- 猫猫学iOS 之CoreLocation反地理编码小Demo输入经纬度得到城市
猫猫分享,必须精品 原创文章,欢迎转载.转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 一:效果 输入经纬度,能够得到相应的地名 二:思路 跟地里编码差 ...
- 'IOKING' TCP Transmission Server Engine ('云猴'©TCP通讯server引擎)(预告版)
关键词: IOKING IOCP TCP Transmission Server Engine Lock Free Interlocked 云猴完毕portTCP通讯server引擎 无锁 原子锁( ...
- linux下误删数据文件恢复
linux下文件被删除能够用非常多工具进行恢复.比如undelete(适合ext2,ext3).giis(不能恢复安装giis之前的文件).ext3grep(仅限ext3).R-linux(支持ext ...
- 5313 [JL]判断邮箱地址 升级版
5313 [JL]判断邮箱地址 升级版 时间限制: 1 s 空间限制: 1000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 正确的邮箱地 ...
- BusyBox telnetd配置
配置telnetd遇到的一些坑,记录一下 BusyBox版本1.22.1 Networking Utilities -->[*] telnetd 错误1: Escape character is ...