概覽
Html5和CSS3就是在原有的基礎(chǔ)上新加的一些特性，在前面的博客中已經(jīng)用很多新特性了，F(xiàn)lex彈性布局大大的減少css代碼，今天再總結(jié)一下工作中會(huì)用到的一些常用知識(shí)點(diǎn)。
案例地址:https://github.com/pengjunshan/WebPJS/C3H5Flex
其它Web文章
HtmlCss基礎(chǔ)學(xué)習(xí)第一章
CSS基礎(chǔ)學(xué)習(xí)第二章
CSS浮動(dòng)的使用和解決浮動(dòng)的五種方法
CSS定位relative、absolute、fixed使用總結(jié)
原生開(kāi)發(fā)WebApi知識(shí)點(diǎn)總結(jié)
開(kāi)發(fā)中常用jQuery知識(shí)點(diǎn)總結(jié)
Flex布局知識(shí)點(diǎn)總結(jié)
ES6常用知識(shí)總結(jié)
Vue學(xué)習(xí)知識(shí)總結(jié)
開(kāi)發(fā)環(huán)境到生產(chǎn)環(huán)境配置webpack
待續(xù)......
本編文章會(huì)講到的知識(shí)點(diǎn)
- CSS3動(dòng)畫(huà)
- 過(guò)渡、線性漸變、徑向漸變動(dòng)畫(huà)
- 2D動(dòng)畫(huà)
- 3D動(dòng)畫(huà)
- animation動(dòng)畫(huà)
- Html5
- H5新增類名操作、自定義屬性操作
- Flex布局
CSS3動(dòng)畫(huà)
過(guò)渡、線性漸變、徑向漸變
1.過(guò)渡
transition過(guò)渡，兩種抒寫方式，一種是分開(kāi)寫每項(xiàng)屬性、一種是合寫。
- 方式一：分開(kāi)寫四個(gè)屬性
1.transition-property 設(shè)置過(guò)渡屬性 可以單寫屬性 也可以用all代替全部
2.transition-duration 設(shè)置過(guò)渡時(shí)間 單位s
3.transition-timing-function 設(shè)置過(guò)渡動(dòng)畫(huà)效果 ease:先慢后快再慢 linear:勻速
4.transition-delay 設(shè)置過(guò)渡延時(shí) 單位s - 方式二：合寫 只需要注意, 延遲時(shí)間寫在執(zhí)行時(shí)間后面就可以了其它順序無(wú)序
transition: all 1s linear 0.2s; //過(guò)渡全部屬性、執(zhí)行1秒鐘、勻速執(zhí)行、延遲0.2秒鐘
2.線性漸變
linear-gradient線性漸變主要是圍繞三步來(lái)做，1. 需要漸變方向; 2. 漸變顏色; 3. 漸變范圍;
background-image: linear-gradient(方向, 顏色 范圍, 顏色 范圍...);
方向 角度: 0deg 記憶方式, 時(shí)鐘方向, 向上0deg, 順時(shí)針旋轉(zhuǎn);
to right === 90deg to bottom === 180deg 默認(rèn) 180deg to bottom;
- 方式一：角度，顏色 范圍，顏色 范圍，顏色 范圍，顏色 范圍
/**
* 右方向，0%-20%之間是red顏色、50%-100%之間是blue顏色、其它是漸變顏色
*/
background-image: linear-gradient(90deg,red 0%,red 20%,blue 50%,blue 100%);
- 方式二：角度，顏色 范圍，顏色 范圍 ，開(kāi)始和結(jié)尾默認(rèn)0% 100%
/**
* 右方向，開(kāi)始和結(jié)尾默認(rèn)0% 100%
*/
background-image: linear-gradient(to right,red 20%,blue 50%);
- 方式三：顏色 范圍，顏色 范圍 ，不寫角度，角度默認(rèn)180deg
background-image: linear-gradient(red 20%, blue 50%);
3.徑向漸變
radial-gradient徑向漸變主要是圍繞著半徑 、 圓心位置X Y, 顏色 范圍, 顏色 范圍...來(lái)設(shè)置值的；
- 方式一：半徑 at 圓心位置X Y, 顏色 范圍, 顏色 范圍
/**
* 半徑100px、 圓心坐標(biāo)100px 100px、50%是red顏色、50%是yellow顏色，超出漸變范圍的用最外面的顏色填充（也就是yellow）
*/
background-image: radial-gradient(100px at 100px 100px ,red 50%,yellow 50%);
- 方式二：半徑 at 圓心位置X Y, 顏色 范圍, 顏色 范圍 .....
/**
* 不寫范圍, 平均分配范圍
*/
background-image: radial-gradient(100px at 100px 100px, red, yellow, pink);
4.案例
本案例包含過(guò)渡、線性漸變、徑向漸變、掃光效果，代碼中詳細(xì)注釋，案例請(qǐng)到https://github.com/pengjunshan/WebPJS中查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clearfix {
clear: both;
}
.clearfix:before,
.clearfix:after {
content: "";
display: block;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.box,
.box1,
.box2 {
width: 200px;
height: 200px;
margin: 10px 30px;
border: 1px solid #000;
float: left;
}
/* 過(guò)渡CSS */
.box {
opacity: 0.5;
color: white;
background-color: blue;
/* 方式一：分開(kāi)寫四個(gè)屬性 */
/* 1.transition-property 設(shè)置過(guò)渡屬性 可以單寫屬性 也可以用all代替全部 */
/* transition-property: width,height; */
transition-property: all;
/* 2.transition-duration 設(shè)置過(guò)渡時(shí)間 單位s */
transition-duration: 2s;
/* 3.transition-timing-function 設(shè)置過(guò)渡動(dòng)畫(huà)效果 ease:先慢后快再慢 linear:勻速 */
transition-timing-function: ease;
/* 4.transition-delay 設(shè)置過(guò)渡延時(shí) 單位s */
transition-delay: 0.5s;
/* 方式二：合寫 只需要注意, 延遲時(shí)間寫在執(zhí)行時(shí)間后面就可以了其它順序無(wú)序 */
transition: all 1s linear 0.2s;
}
.box:hover {
width: 250px;
height: 250px;
opacity: 1;
background-color: red;
}
/* 線性漸變 */
.box1 {
/* 三步驟：1. 需要漸變方向 2. 漸變顏色 3. 漸變范圍 */
/* background-image: linear-gradient(方向, 顏色 范圍, 顏色 范圍...) */
/* 方向 角度: 0deg 記憶方式, 時(shí)鐘方向, 向上0deg, 順時(shí)針旋轉(zhuǎn) */
/* to right === 90deg to bottom === 180deg 默認(rèn) 180deg to bottom */
/* 方式一：角度，顏色 范圍，顏色 范圍，顏色 范圍，顏色 范圍 */
/* background-image: linear-gradient(90deg,red 0%,red 20%,blue 50%,blue 100%); */
/* 方式二：角度，顏色 范圍，顏色范圍 開(kāi)始和結(jié)尾默認(rèn)0% 100%*/
/* background-image: linear-gradient(to right,red 20%,blue 50%); */
/* 方式三：角度默認(rèn)180deg */
background-image: linear-gradient(red 20%, blue 50%);
}
/* 徑向漸變 */
.box2 {
/* 步驟： 半徑, 圓心,顏色, 顏色范圍 */
/* 1. 半徑 at 圓心位置X Y, 顏色 范圍, 顏色 范圍 ..... */
/* 2. 超出漸變范圍的用最外面的顏色填充 */
/* background-image: radial-gradient(100px at 100px 100px ,red 50%,yellow 50%); */
/* 3.如果不寫范圍, 平均分配 */
background-image: radial-gradient(100px at 100px 100px, red, yellow, pink);
}
.sbox {
width: 600px;
height: 360px;
margin: 10px 50px;
position: relative;
overflow: hidden;
}
.sbox img {
width: 600px;
height: 360px;
}
.sbox:hover::before{
/* transform只能設(shè)置一次 后面的會(huì)把前面的覆蓋掉 */
/* 鼠標(biāo)移到圖片 斜切平移 */
transform: translateX(1000px) skew(-45deg);
transition: all 1s;
}
.sbox:hover::after{
/* 鼠標(biāo)移到圖片 延遲0.2s斜切平移 */
transform: translateX(1000px) skew(-45deg);
transition: all 1s 0.2s;
}
.sbox::before , .sbox::after{
content: "";
width: 20px;
height: 360px;
position: absolute;
top: 0px;
left: -210px;
/*設(shè)置斜切 */
transform: skew(-45deg);
/* 設(shè)置線性漸變 */
background-image: linear-gradient(90deg,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0));
}
</style>
</head>
<body style="background-color: black;">
<div class="pbox clearfix">
<!-- transition:過(guò)渡 當(dāng)前元素只要有“屬性”發(fā)生變化時(shí)，可以平滑的進(jìn)行過(guò)渡。并不僅僅局限于hover狀態(tài),也可以通過(guò)修改class -->
<div class="box">過(guò)渡屬性講解</div>
<!-- linear-gradient：線性漸變 -->
<div class="box1">線性漸變</div>
<!-- radial-gradient: 徑向漸變 -->
<div class="box2">徑向漸變</div>
</div>
<!-- 掃光效果 -->
<p style="color: white;margin-left: 50px;">我是掃光效果案例</p>
<div class="sbox">
<img src="../img/2.jpg" alt="">
</div>
</body>
</html>
2D動(dòng)畫(huà)
轉(zhuǎn)換是CSS3中具有顛覆性的特征之一，可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、縮放，配合過(guò)渡和動(dòng)畫(huà)知識(shí)，可以取代大量之前只能靠Flash才可以實(shí)現(xiàn)的效果。
1.移動(dòng) translate(x, y)
1.移動(dòng) translate(x, y) 可以改變?cè)氐奈恢茫瑇、y可為負(fù)值,
transform: translate(300px,300px);
2.除了可以像素值，也可以是百分比，相對(duì)于自身的寬度或高度,
transform: translate(100%, 100%);
3.常用到居中使用，
transform: translate(-50%,-50%);
2.縮放 scale(x, y)
1.縮放 scale(x, y) 可以對(duì)元素進(jìn)行水平和垂直方向的縮放，x、y的取值可為小數(shù)，
transform: scale(1,2);
2.一般情況下x y值都是一樣的值，
transform: scale(2);
3.旋轉(zhuǎn) rotate(deg)
旋轉(zhuǎn) rotate(deg) 可以對(duì)元素進(jìn)行旋轉(zhuǎn)，正值為順時(shí)針，負(fù)值為逆時(shí)針,
transform: rotate(45deg);
4.斜切 skew(x, y)
斜切 skew(x, y) 單位deg 傳角度, 可以讓盒子變傾斜, skewX 是縱向拍扁的效果, skewY 是橫向拍扁的效果,
transform: skew(20deg,20deg);
5.案例
此案例包含了移動(dòng)、縮放、旋轉(zhuǎn)、斜切動(dòng)畫(huà)，代碼中詳細(xì)注釋，案例請(qǐng)到https://github.com/pengjunshan/WebPJS中查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 140px;
height: 140px;
line-height: 140px;
background-color: blue;
transition: all 2s;
margin: 20px 50px;
color: white;
text-align: center;
}
.tl:hover {
/* 移動(dòng) translate(x, y) 可以改變?cè)氐奈恢茫瑇、y可為負(fù)值 */
/* transform: translate(300px,300px); */
/* transform: translate(-100px,-100px); */
/* 除了可以像素值，也可以是百分比，相對(duì)于自身的寬度或高度 */
transform: translate(100%, 100%);
/* transform: translate(-50%,-50%); 常用到居中使用 */
}
.se:hover {
/* 縮放 scale(x, y) 可以對(duì)元素進(jìn)行水平和垂直方向的縮放，x、y的取值可為小數(shù)； */
transform: scale(1.5);
/* transform: scale(1,2); */
}
.rt:hover {
/* 旋轉(zhuǎn) rotate(deg) 可以對(duì)元素進(jìn)行旋轉(zhuǎn)，正值為順時(shí)針，負(fù)值為逆時(shí)針 */
/* transform: rotate(45deg); */
transform: rotate(-60deg);
}
.sk:hover {
/* 斜切 skew(x, y)deg 傳角度, 可以讓盒子變傾斜, skewX 是縱向拍扁的效果, skewY 是橫向拍扁的效果 */
transform: skew(20deg, 20deg);
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
/* 給 body 添加徑向漸變 */
body {
background-image: radial-gradient(200px at right top, red 10%, yellow 20%, white, skyblue);
}
img {
position: absolute;
left: 0px;
bottom: -190px;
}
body:hover img {
transition: all 4s;
transform: translate(1400px, -800px) scale(0) rotate(45deg);
}
</style>
</head>
<body>
<!-- 平移 translate 移動(dòng)位置相當(dāng)于從自身原來(lái)位置 -->
<div class="tl">平移 translate</div>
<!-- 縮放 scale -->
<div class="se">縮放 scale</div>
<!-- 旋轉(zhuǎn) rotate -->
<div class="rt">旋轉(zhuǎn) rotate</div>
<!-- 斜切 skew -->
<div class="sk">斜切 skew</div>
<!-- 飛機(jī)飛向太陽(yáng)案例 -->
<img src="../img/rocket.png" alt="">
</body>
</html>
3D動(dòng)畫(huà)
transform:不僅可以2D轉(zhuǎn)換，還可以進(jìn)行3D轉(zhuǎn)換。
用X、Y、Z分別表示空間的3個(gè)維度，三條軸互相垂直。注意+Y是向下的。
1.translate平移
1.transform: translateX(100px)， x軸移動(dòng)100px,可以為負(fù)值；
2.transform: translateY(100px)，y軸移動(dòng)100培訓(xùn)，可以為負(fù)值；
3.transform: translateZ(50px),z軸移動(dòng)50px，可以為負(fù)值；
4.transform: translate3d(x, y, z) xyz是三軸移動(dòng)的距離
/*沿著X軸的正方向移動(dòng)45px*/
transform: translateX(45px);
/*沿著Y軸的正方向移動(dòng)45px*/
transform: translateY(45px);
/*沿著Y軸的正方向移動(dòng)45px*/
transform: translateZ(45px);
/*xyz是三軸移動(dòng)的距離*/
transform: translate3d(100px, 100px, 100px);
2.rotate旋轉(zhuǎn)
值可以是正值或負(fù)值 可以連寫多個(gè)旋轉(zhuǎn)角度;
1.translateX() 伸出左手, 大拇指指向軸的正方向, 手指卷曲的方向, 就是旋轉(zhuǎn)的正方向;
2.translateY() 伸出左手，大拇指指朝下正方向，手指卷曲的方向, 就是旋轉(zhuǎn)的正方向;
3.rotateZ(*) 伸出左手，大拇指指臉正方向，手指卷曲的方向, 就是旋轉(zhuǎn)的正方向;
4.transform: rotate3d(x,y,z,adeg) x y z 為0時(shí)不旋轉(zhuǎn)、為1時(shí)旋轉(zhuǎn)、a是角度;
/* 值可以是正值或負(fù)值 可以連寫多個(gè)旋轉(zhuǎn)角度 */
/* 1.transform: rotateX(*deg);讓元素在平面2D中旋轉(zhuǎn) */
/* 心中自有3個(gè)軸 */
/* transform: rotate(45deg); */
/* 1.伸出左手, 大拇指指向軸的正方向, 手指卷曲的方向, 就是旋轉(zhuǎn)的正方向 */
/* transform: rotateX(45deg); */
/* 2.伸出左手，大拇指指朝下正方向，手指卷曲的方向, 就是旋轉(zhuǎn)的正方向 */
/* transform: rotateY(45deg); */
/* 3.伸出左手，大拇指指臉正方向，手指卷曲的方向, 就是旋轉(zhuǎn)的正方向*/
/* transform: rotateZ(45deg); */
/* transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg); */
/* transform: rotate3d(x,y,z,adeg) x y z 為0時(shí)不旋轉(zhuǎn)、為1時(shí)旋轉(zhuǎn)、a是角度*/
transform: rotate3d(1,0,0,45deg);
3.perspective透視
電腦顯示屏是一個(gè)2D的平面，因?yàn)槲覀兛床怀鰜?lái)旋轉(zhuǎn)的方向，通過(guò)perspective屬性，指定觀察者與「z=0」平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果，單位是px;
設(shè)置了perspective屬性后，就有了近大遠(yuǎn)小的效果了，在視覺(jué)上，有3d透視的效果;
當(dāng)為元素定義 perspective 屬性時(shí)，其子元素會(huì)獲得透視效果。(給父元素加);
body {
/* perspective 給父元素加, 讓子元素?fù)碛薪筮h(yuǎn)小的透視效果 */
/* 1. 沒(méi)有 perspective, 就沒(méi)有近大遠(yuǎn)小的效果 */
/* 2. perspective 可以輔助我們查看3d效果 */
/* 3. 1000px 指觀察者離屏幕的距離 */
perspective: 1000px;
}
4.transform-style
透視：透視只是相當(dāng)于設(shè)置了一個(gè)距離，實(shí)現(xiàn)了近大遠(yuǎn)小的效果, 輔助我們查看3D效果的工具，preserve-3d:給父盒子添加，讓子元素3D的空間布局，說(shuō)白了，只有設(shè)置了preserve-3d，這個(gè)元素才能被稱之為3d元素。
一個(gè)3d元素可以沒(méi)有perspective，但是不能沒(méi)有transform-style
body {
transform-style: preserve-3d;
}
5.案例
此案例用 transform-style: preserve-3d;來(lái)展示3d效果。代碼中詳細(xì)注釋，案例請(qǐng)到https://github.com/pengjunshan/WebPJS中查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
/* 一般設(shè)置給整個(gè)3d整體的父級(jí) */
/* perspective: 1000px; */
transform-style: preserve-3d;
}
.father {
width: 120px;
height: 200px;
border: 1px solid #000;
margin: 10px auto;
position: relative;
/* 父元素Y軸偏移一點(diǎn) 否則看不出效果 */
transform: rotateY(26deg);
/* perspective 只是使子盒子擁有近大遠(yuǎn)小的視覺(jué)效果 */
/* perspective: 1000px; */
/* 真正實(shí)現(xiàn)3d transform-style: preserve-3d 實(shí)現(xiàn)的 */
/* 默認(rèn)值 flat 表示平面布局 */
/* preserve-3d 是我們真正使得子盒子按三維立體進(jìn)行布局, 一定要加給父元素 */
transform-style: preserve-3d;
}
.son1,
.son2 {
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 200px;
}
.son1 {
background-color: blue;
}
.son2 {
background-color: red;
transform: rotateX(45deg);
}
.lt {
width: 180px;
height: 180px;
border: 1px solid #000;
margin: 60px auto;
position: relative;
transition: all 5s;
transform-style: preserve-3d;
}
.lt:hover {
/* XYZ都旋轉(zhuǎn) */
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
.lt li {
position: absolute;
top: 0;
left: 0;
width: 180px;
height: 180px;
}
.lt li:nth-child(1) {
background-color: blue;
transform: translateZ(90px);
}
.lt li:nth-child(2) {
background-color: blueviolet;
transform: rotateX(90deg) translateZ(90px);
}
.lt li:nth-child(3) {
background-color: brown;
transform: rotateX(180deg) translateZ(90px);
}
.lt li:nth-child(4) {
background-color: chartreuse;
transform: rotateX(270deg) translateZ(90px);
}
.lt li:nth-child(5) {
background-color: pink;
transform: rotateY(-90deg) translateZ(90px);
}
.lt li:nth-child(6) {
background-color: purple;
transform: rotateY(90deg) translateZ(90px);
}
.fg {
width: 600px;
height: 50px;
border: 1px solid black;
margin: 20px auto;
}
.fg li {
width: 100px;
height: 50px;
float: left;
position: relative;
transition: all 1s;
/* 真正實(shí)現(xiàn) 3d 效果, 不一定需要加上 perspective */
/* 由于是span做的3d變換, 所以 transform-style: preserve-3d; 加給父盒子li*/
transform-style: preserve-3d;
}
.fg li:hover {
transform: rotateX(-90deg);
}
.fg li span {
width: 100px;
height: 50px;
line-height: 50px;
position: absolute;
top: 0px;
left: 0px;
text-align: center;
}
.fg li span:nth-child(1) {
background-color: blue;
transform: translateZ(25px);
}
.fg li span:nth-child(2) {
background-color: pink;
transform: rotateX(90deg) translateZ(25px);
}
</style>
</head>
<body>
<!-- transform-style -->
<!-- transform-style 屬性規(guī)定如何在 3D 空間中呈現(xiàn)被嵌套的元素。注意這個(gè)屬性也是給父元素添加。 -->
<!-- 一個(gè)3d元素可以沒(méi)有perspective，但是不能沒(méi)有transform-style -->
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>
<!-- 立體案例 -->
<ul class="lt">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 翻滾 -->
<ul class="fg">
<li>
<span>吃飯了嗎</span>
<span>紅燒豬蹄</span>
</li>
<li>
<span>吃飯了嗎</span>
<span>魚(yú)香肉絲</span>
</li>
<li>
<span>吃飯了嗎</span>
<span>可樂(lè)雞翅</span>
</li>
<li>
<span>吃飯了嗎</span>
<span>山東煎餅</span>
</li>
<li>
<span>吃飯了嗎</span>
<span>天津包子</span>
</li>
<li>
<span>吃飯了嗎</span>
<span>歐洲牛排</span>
</li>
</ul>
</body>
</html>
animation動(dòng)畫(huà)
animation是一個(gè)復(fù)合屬性，一共有8個(gè)參數(shù);
一般是由@keyframes先定義動(dòng)畫(huà)，然后animation使用動(dòng)畫(huà)。
1.animation-name:動(dòng)畫(huà)名稱，由@keyframes定義的
2.animation-duration：動(dòng)畫(huà)的持續(xù)時(shí)間
3.animation-timing-function：動(dòng)畫(huà)的過(guò)渡類型
4.animation-delay：動(dòng)畫(huà)的延遲時(shí)間
5.animation-iteration-count：動(dòng)畫(huà)的循環(huán)次數(shù)
6.animation-direction：設(shè)置動(dòng)畫(huà)在循環(huán)中是否反向運(yùn)動(dòng)
7.animation-fill-mode：設(shè)置動(dòng)畫(huà)時(shí)間之外的狀態(tài)
8.animattion-play-state:設(shè)置動(dòng)畫(huà)的狀態(tài)。
動(dòng)畫(huà)簡(jiǎn)寫屬性
- animation：動(dòng)畫(huà)名稱 持續(xù)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開(kāi)始 播放次數(shù) 是否反方向 動(dòng)畫(huà)起始或結(jié)束狀態(tài) ;
- 簡(jiǎn)寫屬性里面不包含 animation-play-state，暫停動(dòng)畫(huà)：animation-play-state: puased; 經(jīng)常和鼠標(biāo)經(jīng)過(guò)等其他配合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background-color: #000;
}
div {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: red;
box-shadow: 0px 0px 4px 4px #fff;
/* 使用動(dòng)畫(huà) */
/* animation: myAnimaiton 2s infinite; */
/* 1. 動(dòng)畫(huà)名稱 */
animation-name: myAnimaiton;
/* 2. 動(dòng)畫(huà)執(zhí)行時(shí)間 */
animation-duration: 2s;
/* 3. 動(dòng)畫(huà)執(zhí)行次數(shù) */
/*animation-iteration-count: 2;*/
/* infinite 無(wú)限次 */
animation-iteration-count: infinite;
/* 4. 延遲時(shí)間 */
/*animation-delay: 1s;*/
/* 5. 動(dòng)畫(huà)效果 */
/* animation-timing-function: linear; */
/* steps(n) 按照步數(shù)執(zhí)行, 可以用來(lái)實(shí)現(xiàn)幀動(dòng)畫(huà) */
/* animation-timing-function: steps(3); */
/* 6. 動(dòng)畫(huà)方向 */
/* alternate 交替執(zhí)行, 可以讓動(dòng)畫(huà)序列來(lái)回交替執(zhí)行 */
/* animation-direction: alternate; */
/* 7. 動(dòng)畫(huà)最終狀態(tài) forwards 停留在最終動(dòng)畫(huà)狀態(tài) */
/*animation-fill-mode: forwards;*/
}
div:hover {
/* 8. 動(dòng)畫(huà)播放狀態(tài) */
animation-play-state: paused;
}
/* 自定義動(dòng)畫(huà) */
@keyframes myAnimaiton {
0% {
transform: scale(1.0)
}
100% {
transform: scale(1.5)
}
}
</style>
</head>
<body>
<div>奔跑吧, 兄弟！</div>
</body>
</html>
動(dòng)畫(huà)庫(kù)的使用
俗話說(shuō)的好不會(huì)偷懶的程序員不是個(gè)好程序員，工作中手寫動(dòng)畫(huà)比較麻煩，可以用第三方動(dòng)畫(huà)庫(kù)來(lái)幫我們實(shí)現(xiàn)，我們只需引用第三方庫(kù)就行了；
一個(gè)用的比較多的動(dòng)畫(huà)庫(kù)animate.css；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1. 引入動(dòng)畫(huà)函數(shù)庫(kù) -->
<link rel="stylesheet" href="animate.css">
<style>
div {
width: 200px;
height: 200px;
background-color: blue;
}
.box {
animation: bounceInRight2 2s infinite alternate;
}
/* 直接把a(bǔ)nimate.css中找到bounceInRight動(dòng)畫(huà)拷貝過(guò)來(lái) 可以進(jìn)行修改 */
@keyframes bounceInRight2 {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0);
}
75% {
transform: translate3d(10px, 0, 0);
}
90% {
transform: translate3d(-5px, 0, 0);
}
to {
transform: none;
}
}
</style>
</head>
<body>
<!-- 2. 直接使用設(shè)計(jì)好的動(dòng)畫(huà)庫(kù), 直接加類, animated, 選擇想要的動(dòng)畫(huà)效果 添加效果類 -->
<div class="animated bounceInRight">我是引用animate庫(kù)動(dòng)畫(huà)</div>
<!-- 直接把a(bǔ)nimate.css中找到bounceInRight動(dòng)畫(huà)拷貝過(guò)來(lái) 可以進(jìn)行修改 -->
<div class="box">我是修改animate庫(kù)動(dòng)畫(huà)</div>
</body>
</html>
Html5
H5新增類名操作、自定義屬性操作
html5 新增一個(gè)非常簡(jiǎn)單的操作類樣式的api:classList;
html5新增一個(gè)操作屬性樣式的api:dataset;
- classList：四個(gè)操作樣式類的方法, 很簡(jiǎn)單
- 添加類: dom.classList.add
- 移除類: dom.classList.remove
- 判斷類: dom.classList.contains
- 切換類: dom.classList.toggle
- dataset：自定義屬性添加、修改、獲取
- 存的時(shí)候, 在屬性名前面加上 data-, <div class="pp" data-uage="18" data-uname="鵬鵬" data-sex="男"></div>
- 取的時(shí)候, 通過(guò) dataset.屬性名取, 例如: box.dataset.uage 或者 box.dataset["uage"]
- 修改添加, 直接通過(guò)對(duì)象屬性操作方式操作即可例如: box.dataset.uage=12
- 案例
代碼中詳細(xì)注釋，案例請(qǐng)到https://github.com/pengjunshan/WebPJS中查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<div class="">李小璐</div>
<div id="pgone" data-title="大家好，我是PGone" data-job="專業(yè)戴帽子">PGone</div>
<input type="button" value="切換">
<script>
$(function () {
let $div = $("div");
var div = document.querySelector("div");
//原生className操作類名
div.className = "aa bb";
//juery操作類名
// $div.addClass("cc dd")
/*
* html5 新增一個(gè)非常簡(jiǎn)單的操作類樣式的api
*/
//1.添加類, 給當(dāng)前元素添加一個(gè)類 dom.classList.add("類名")
div.classList.add("cc")
//2.移除類, 移除當(dāng)前元素的一個(gè)類 dom.classList.remove(類名)
div.classList.remove("aa")
//3. 判斷類 dom.classList.contains("類名") 返回值布爾類型
let isHave = div.classList.contains("bb")
console.log(isHave)
//4. 切換類 dom.classList.toggle("類名"); 有就刪除類名 沒(méi)有就添加類名
div.classList.toggle("aa")
let pg = document.getElementById("pgone")
/*
* 在之前的工作, 我們都是通過(guò) getAttribute setAttribute 來(lái)操作自定義屬性的
* html5 提供一個(gè)解決方案: dataset
*/
//原生getAttribute
console.log(pg.getAttribute("data-title"))
//h5通過(guò)dataset
console.log(pg.dataset.job);
//添加或者修改屬性
pg.dataset.love = "lxl"
})
</script>
</body>
</html>
H5網(wǎng)絡(luò)監(jiān)聽(tīng)、地理位置監(jiān)聽(tīng)
在移動(dòng)端，我們經(jīng)常需要檢測(cè)設(shè)置是在線還是離線，HTML5為此定義了一個(gè)navigator.onLine屬性，這個(gè)屬性用于檢測(cè)設(shè)備是否聯(lián)網(wǎng);
在HTML規(guī)范中，增加了獲取用戶地理信息的API，這樣使得我們可以基于用戶位置開(kāi)發(fā)互聯(lián)網(wǎng)應(yīng)用，即基于位置服務(wù)LBS(Location Base Service);
1.網(wǎng)絡(luò)狀態(tài)
navigator.onLine返回用戶當(dāng)前的網(wǎng)絡(luò)狀況，是一個(gè)布爾值;
1. 如果瀏覽器連不上網(wǎng)(包括局域網(wǎng))，就是離線狀態(tài)，也就是脫機(jī)狀態(tài)，會(huì)返回false;
2. 否則就是在線狀態(tài)，返回true;
if (navigator.onLine) {
//有網(wǎng)
}else{
//無(wú)網(wǎng)
}
2.監(jiān)聽(tīng)網(wǎng)絡(luò)變化
為了更好的確定網(wǎng)絡(luò)是否連接，HTML5還定義了兩個(gè)事件，用于監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)的變化。online:聯(lián)網(wǎng) offline：斷網(wǎng)
//網(wǎng)絡(luò)連接時(shí)會(huì)被調(diào)用
window.addEventListener("online", function () {
alert("online");
});
//網(wǎng)絡(luò)斷開(kāi)時(shí)會(huì)被調(diào)用
window.addEventListener("offline", function () {
alert("offline");
});
3.獲取位置相關(guān)監(jiān)聽(tīng)
在html5 中 提供了獲取用戶地理位置的 api，獲取位置的坐標(biāo)是 google地圖的坐標(biāo)；
navigator.geolocation.getCurrentPosition(successFuc, errorFuc);
參數(shù)1: 獲取位置成功的回調(diào)函數(shù), 會(huì)給我們一個(gè) location 參數(shù)對(duì)象;
參數(shù)2: 獲取位置失敗的回調(diào)函數(shù);
PC端: chrome,火狐定位請(qǐng)求的頁(yè)面要求要是https協(xié)議的, 所以PC端測(cè)試在IE下測(cè)試;
移動(dòng)端: 在iOS 10中，蘋果對(duì)webkit定位權(quán)限進(jìn)行了修改，定位請(qǐng)求的頁(yè)面必須是https協(xié)議的。
1.獲取當(dāng)前的地理位置信息：navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
2.重復(fù)的獲取當(dāng)前的地理位置信息：navigator.geolocation.watchPosition(successCallback, errorCallback)
3.實(shí)例：
navigator.geolocation.getCurrentPosition(function(position){
// 定位成功會(huì)調(diào)用該方法
// position.coords.latitude 緯度
// position.coords.longitude 經(jīng)度
// position.coords.accuracy 精度
// position.coords.altitude 海拔高度
}, function(error){
// 定位失敗會(huì)調(diào)用該方法
// error 是錯(cuò)誤信息
});
4.案例
代碼中詳細(xì)注釋，案例請(qǐng)到https://github.com/pengjunshan/WebPJS中查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 400px;
height: 40px;
line-height: 40px;
text-align: center;
margin: 0 auto;
transition: all 1s;
color: white;
}
.online {
background-color: green;
}
.offline {
background-color: orange;
}
</style>
</head>
<body>
<div class="online">監(jiān)聽(tīng)網(wǎng)絡(luò)狀態(tài)案例</div>
<div id="location"></div>
<script>
let line = document.querySelector("div")
/*
* 在 html5 提供可以判斷網(wǎng)狀態(tài)的 api
* navigator.onLine返回用戶當(dāng)前的網(wǎng)絡(luò)狀況，是一個(gè)布爾值 true:聯(lián)網(wǎng) false:無(wú)網(wǎng)
* */
if (navigator.onLine) {
line.className = "online";
line.innerHTML = "有網(wǎng)，可以打LOL";
} else {
line.innerHTML = "無(wú)網(wǎng)，可以打單擊CF";
line.className = "offline";
}
/**
* 切換到聯(lián)網(wǎng)狀態(tài)時(shí)觸發(fā) online
* */
window.addEventListener("online", function () {
line.className = "online";
line.innerHTML = "有網(wǎng)，可以打LOL";
});
/**
* offline 斷網(wǎng),離線狀態(tài)
* */
window.addEventListener("offline", function () {
line.innerHTML = "無(wú)網(wǎng)，可以打單擊CF";
line.className = "offline";
})
/*
* 在html5 中 提供了獲取用戶地理位置的 api
* 獲取位置的坐標(biāo)是 google地圖的坐標(biāo)
* navigator.geolocation.getCurrentPosition(successFuc, errorFuc)
* 參數(shù)1: 獲取位置成功的回調(diào)函數(shù), 會(huì)給我們一個(gè) location 參數(shù)對(duì)象
* 參數(shù)2: 獲取位置失敗的回調(diào)函數(shù)
**/
let locatDiv = document.getElementById("location");
//獲取當(dāng)前的地理位置信息
navigator.geolocation.getCurrentPosition(function (location) {
console.log("成功的回調(diào)函數(shù)")
var longitude = location.coords.longitude; // 經(jīng)度
var latitude = location.coords.latitude; // 緯度
var accuracy = location.coords.accuracy; // 精準(zhǔn)度
var altitude = location.coords.altitude; // 海拔
var str = '<p>經(jīng)度:' + longitude + ' </p>' +
'<p>緯度:' + latitude + ' </p>' +
'<p>精準(zhǔn)度:' + accuracy + ' </p>' +
'<p>海拔:' + altitude + ' </p>';
locatDiv.innerHTML = str;
}, function (error) {
console.log("失敗的回調(diào)函數(shù)")
});
//重復(fù)的獲取當(dāng)前的地理位置信息
navigator.geolocation.watchPosition(function (location) {
console.log("成功的回調(diào)函數(shù)")
var longitude = location.coords.longitude; // 經(jīng)度
var latitude = location.coords.latitude; // 緯度
var accuracy = location.coords.accuracy; // 精準(zhǔn)度
var altitude = location.coords.altitude; // 海拔
var str = '<p>經(jīng)度:' + longitude + ' </p>' +
'<p>緯度:' + latitude + ' </p>' +
'<p>精準(zhǔn)度:' + accuracy + ' </p>' +
'<p>海拔:' + altitude + ' </p>';
locatDiv.innerHTML = str;
}, function (error) {
console.log("失敗的回調(diào)函數(shù)")
});
</script>
</body>
</html>
web存儲(chǔ)
1.cookie
傳統(tǒng)方式，我們以document.cookie進(jìn)行存儲(chǔ)，但是存儲(chǔ)起來(lái)特別麻煩，并且，存儲(chǔ)大小只有4k，常用來(lái)做自動(dòng)登錄，即存儲(chǔ)用戶的賬號(hào)和密碼信息。每次請(qǐng)求都會(huì)帶上cookie;
cookie是以字符串形式存在的，這個(gè)字符串有固定的格式：key=value;key1=value1;
- 傳統(tǒng)存取cookie
//存cookie
document.cookie = "name = pgone";
document.cookie = "love = cisi";
//取cookie
let co = document.cookie;
console.log(document.cookie)
- jquery存儲(chǔ)cookie: 使用原生js操作cookie太過(guò)麻煩，尤其是cookie的獲取和刪除操作，使用jquery.cookie插件，能夠簡(jiǎn)化我們的操作。
//引入jquery.cookie.js
<script src="jquery.cookie.js"></script>
//1.存cookie 或者 設(shè)置 cookie
$.cookie("hxm", "baby");
//2.取cookie
let hxm = $.cookie("hxm")
console.log(hxm)
//3.刪cookie
$.removeCookie("hxm")
2.sessionStorage和localStorage
- sessionStorage
1.生命周期, 瀏覽器窗口一關(guān)閉, 就沒(méi)了
2.不能在多個(gè)窗口下共享數(shù)據(jù)
3.大小為5M - localStorage
1.永久存儲(chǔ), 除非手動(dòng)刪除
2.可以在多個(gè)窗口下共享數(shù)據(jù)
3.大小為5M - api:上面兩個(gè)api操作方式一模一樣
- 設(shè)置 setItem(key,value)
- 讀取 getItem(key)
- 刪除 removeItem(key)
- 清空所有 clear() 不要輕易用會(huì)把其它地方存儲(chǔ)的值都會(huì)清除掉
3.localStorage 中只支持存字符串
sessionStorage 可以存儲(chǔ)對(duì)象
localStorage不能存儲(chǔ)對(duì)象
var obj = {name: "鵬鵬", age: "18"}
- 解決方法：
1.可以轉(zhuǎn)換成 JSON 字符串再存儲(chǔ)：localStorage.setItem("obj", JSON.stringify(obj));
2.拿到的是 JSON字符串再解析：JSON.parse(localStorage.getItem("obj"))
h5FileReader對(duì)象、拖拽效果
1.FileReader對(duì)象
通過(guò)FileReader對(duì)象我們可以讀取本地存儲(chǔ)的文件，可以使用 File 對(duì)象來(lái)指定所要讀取的文件或數(shù)據(jù)。
其中File對(duì)象可以是來(lái)自用戶在一個(gè) <input> 元素上選擇文件后返回的FileList 對(duì)象，也可以來(lái)自由拖放操作生成的 DataTransfer
- files
對(duì)于file類型的input框，在這個(gè)DOM對(duì)象中，存在一個(gè)files屬性，這個(gè)屬性是FileList對(duì)象，是一個(gè)偽數(shù)組，里面存儲(chǔ)著上傳的所有文件，當(dāng)input框指定了multiple屬性之后，就可以上傳多個(gè)文件了。
也就是說(shuō)，通過(guò)files這個(gè)屬性，我們就可以獲取到所有上傳的文件。
- file對(duì)象
File對(duì)象中包含了文件的最后修改時(shí)間、文件名、文件類型等信息。
- FileReader對(duì)象
FileReader是一個(gè)HTML5新增的對(duì)象，用于讀取文件。
//創(chuàng)建一個(gè)fileReader對(duì)象
var fr = new FileReader;
//讀取文件的兩個(gè)方法
readAsText() 以文本的方式讀取文件
readAsDataURL() 以DataURL形式讀取文件
//文件讀取完成事件：
fr.onload = function(){}
//當(dāng)文件讀取完成，可以通過(guò)result屬性獲取結(jié)果
fr.result
2.拖拽
- 拖拽元素
頁(yè)面中設(shè)置了draggable="true"屬性的元素可以被拖拽，其中<img>、<a>標(biāo)簽?zāi)J(rèn)是可以被拖拽的；
- 目標(biāo)元素, 事件監(jiān)聽(tīng)
頁(yè)面中任何一個(gè)元素都可以成為目標(biāo)元素
1.ondragover 應(yīng)用于目標(biāo)元素，當(dāng)停留在目標(biāo)元素上時(shí)調(diào)用
2.ondrop 應(yīng)用于目標(biāo)元素，當(dāng)在目標(biāo)元素上松開(kāi)鼠標(biāo)時(shí)調(diào)用(瀏覽器默認(rèn)不讓拖拽，需要阻止 e.preventDefault()默認(rèn)行為。)
3.案例
代碼中詳細(xì)注釋，案例請(qǐng)到https://github.com/pengjunshan/WebPJS中查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.source {
width: 140px;
height: 140px;
background-color: red;
}
.target {
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
<!-- multiple：可以實(shí)現(xiàn)多文件上傳 accept：限制文件類型，自行百度 -->
<!--<input type="file" multiple>-->
<input type="file" multiple accept="image/jpeg,image/jpg,image/png">
<!-- 設(shè)置draggable="true"屬性 是可以被拖拽的-->
<div draggable="true" class="source"></div>
<div class="target"></div>
<script>
/**
* 文件上傳
*/
var input = document.querySelector("input");
var div = document.querySelector("div");
input.addEventListener("change", function () {
//這個(gè)屬性是FileList對(duì)象，是一個(gè)偽數(shù)組，里面存儲(chǔ)著上傳的所有文件，
console.log(input.files)
// 1. 獲取文件
let file = input.files[0];
// 2. 創(chuàng)建文件讀取對(duì)象
let fileReader = new FileReader();
// 3. 調(diào)用方法讀取文件
fileReader.readAsDataURL(file);
// 得到結(jié)果(注意讀取是需要時(shí)間的)
console.log(fileReader.result);
// 4. 等待讀取完成 onload
fileReader.onload = function () {
console.log(fileReader.result);
// 結(jié)果是 base64 圖片字符串, 可以直接當(dāng)成圖片使用
div.innerHTML = '<img src="' + fileReader.result + '">';
}
});
/**
* 拖拽效果
*/
var source = document.querySelector(".source");
var target = document.querySelector(".target");
// 當(dāng)拖拽元素在目標(biāo)元素上時(shí)觸發(fā)
target.addEventListener("dragover", function (e) {
console.log("來(lái)呀，快活啊")
// 瀏覽器默認(rèn)阻止了拖拽
e.preventDefault();
});
// 當(dāng)拖拽元素在目標(biāo)元素上松開(kāi)鼠標(biāo)時(shí)觸發(fā)
target.addEventListener("drop", function (e) {
console.log("進(jìn)來(lái)了")
target.appendChild(source)
})
</script>
</body>
</html>
