C3動畫+H5知識點(diǎn)使用總結(jié)

概覽

Html5和CSS3就是在原有的基礎(chǔ)上新加的一些特性，在前面的博客中已經(jīng)用很多新特性了，F(xiàn)lex彈性布局大大的減少css代碼，今天再總結(jié)一下工作中會用到的一些常用知識點(diǎn)。

案例地址:https://github.com/pengjunshan/WebPJS/C3H5Flex

其它Web文章
HtmlCss基礎(chǔ)學(xué)習(xí)第一章
CSS基礎(chǔ)學(xué)習(xí)第二章
CSS浮動的使用和解決浮動的五種方法
CSS定位relative、absolute、fixed使用總結(jié)
原生開發(fā)WebApi知識點(diǎn)總結(jié)
開發(fā)中常用jQuery知識點(diǎn)總結(jié)
Flex布局知識點(diǎn)總結(jié)
ES6常用知識總結(jié)
Vue學(xué)習(xí)知識總結(jié)
開發(fā)環(huán)境到生產(chǎn)環(huán)境配置webpack
待續(xù)......

本編文章會講到的知識點(diǎn)
  • CSS3動畫
    • 過渡、線性漸變、徑向漸變動畫
    • 2D動畫
    • 3D動畫
    • animation動畫
  • Html5
    • H5新增類名操作、自定義屬性操作
  • Flex布局
CSS3動畫
過渡、線性漸變、徑向漸變

1.過渡

transition過渡，兩種抒寫方式，一種是分開寫每項(xiàng)屬性、一種是合寫。

  • 方式一：分開寫四個(gè)屬性
    1.transition-property 設(shè)置過渡屬性 可以單寫屬性 也可以用all代替全部
    2.transition-duration 設(shè)置過渡時(shí)間 單位s
    3.transition-timing-function 設(shè)置過渡動畫效果 ease:先慢后快再慢 linear:勻速
    4.transition-delay 設(shè)置過渡延時(shí) 單位s
  • 方式二：合寫 只需要注意, 延遲時(shí)間寫在執(zhí)行時(shí)間后面就可以了其它順序無序
    transition: all 1s linear 0.2s; //過渡全部屬性、執(zhí)行1秒鐘、勻速執(zhí)行、延遲0.2秒鐘

2.線性漸變

linear-gradient線性漸變主要是圍繞三步來做，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%);
  • 方式二：角度，顏色 范圍，顏色 范圍 ，開始和結(jié)尾默認(rèn)0% 100%
/**
*  右方向，開始和結(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, 顏色 范圍, 顏色 范圍...來設(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.案例

本案例包含過渡、線性漸變、徑向漸變、掃光效果，代碼中詳細(xì)注釋，案例請到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;
        }


        /* 過渡CSS */
        .box {
            opacity: 0.5;
            color: white;
            background-color: blue;
            /* 方式一：分開寫四個(gè)屬性 */
            /* 1.transition-property 設(shè)置過渡屬性 可以單寫屬性 也可以用all代替全部 */
            /* transition-property: width,height; */
            transition-property: all;
            /* 2.transition-duration 設(shè)置過渡時(shí)間 單位s */
            transition-duration: 2s;
            /* 3.transition-timing-function 設(shè)置過渡動畫效果 ease:先慢后快再慢 linear:勻速 */
            transition-timing-function: ease;
            /* 4.transition-delay 設(shè)置過渡延時(shí) 單位s */
            transition-delay: 0.5s;

            /* 方式二：合寫 只需要注意, 延遲時(shí)間寫在執(zhí)行時(shí)間后面就可以了其它順序無序 */
            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%); */
            /* 方式二：角度，顏色 范圍，顏色范圍  開始和結(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è)置一次 后面的會把前面的覆蓋掉 */
            /* 鼠標(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:過渡 當(dāng)前元素只要有“屬性”發(fā)生變化時(shí)，可以平滑的進(jìn)行過渡。并不僅僅局限于hover狀態(tài),也可以通過修改class -->
        <div class="box">過渡屬性講解</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動畫

轉(zhuǎn)換是CSS3中具有顛覆性的特征之一，可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、縮放，配合過渡和動畫知識，可以取代大量之前只能靠Flash才可以實(shí)現(xiàn)的效果。

1.移動 translate(x, y)

1.移動 translate(x, y) 可以改變元素的位置，x、y可為負(fù)值,
transform: translate(300px,300px);
2.除了可以像素值，也可以是百分比，相對于自身的寬度或高度,
transform: translate(100%, 100%);
3.常用到居中使用，
transform: translate(-50%,-50%);

2.縮放 scale(x, y)

1.縮放 scale(x, y) 可以對元素進(jìn)行水平和垂直方向的縮放，x、y的取值可為小數(shù)，
transform: scale(1,2);
2.一般情況下x y值都是一樣的值，
transform: scale(2);

3.旋轉(zhuǎn) rotate(deg)

旋轉(zhuǎn) rotate(deg) 可以對元素進(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.案例

此案例包含了移動、縮放、旋轉(zhuǎn)、斜切動畫，代碼中詳細(xì)注釋，案例請到https://github.com/pengjunshan/WebPJS中查看

2D轉(zhuǎn)換
<!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 {
            /* 移動 translate(x, y) 可以改變元素的位置，x、y可為負(fù)值 */
            /* transform: translate(300px,300px); */
            /* transform: translate(-100px,-100px); */

            /* 除了可以像素值，也可以是百分比，相對于自身的寬度或高度 */
            transform: translate(100%, 100%);
            /* transform: translate(-50%,-50%); 常用到居中使用 */
        }

        .se:hover {
            /* 縮放 scale(x, y) 可以對元素進(jìn)行水平和垂直方向的縮放，x、y的取值可為小數(shù)； */
            transform: scale(1.5);
            /* transform: scale(1,2); */
        }

        .rt:hover {
            /* 旋轉(zhuǎn) rotate(deg) 可以對元素進(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)于從自身原來位置 -->
    <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ī)飛向太陽案例 -->
    <img src="../img/rocket.png" alt="">

</body>

</html>
3D動畫

transform:不僅可以2D轉(zhuǎn)換，還可以進(jìn)行3D轉(zhuǎn)換。
用X、Y、Z分別表示空間的3個(gè)維度，三條軸互相垂直。注意+Y是向下的。

三維坐標(biāo)軸

1.translate平移

1.transform: translateX(100px)， x軸移動100px,可以為負(fù)值；
2.transform: translateY(100px)，y軸移動100培訓(xùn)，可以為負(fù)值；
3.transform: translateZ(50px),z軸移動50px，可以為負(fù)值；
4.transform: translate3d(x, y, z) xyz是三軸移動的距離

/*沿著X軸的正方向移動45px*/
transform: translateX(45px);
/*沿著Y軸的正方向移動45px*/
transform: translateY(45px);
/*沿著Y軸的正方向移動45px*/
transform: translateZ(45px);
/*xyz是三軸移動的距離*/
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)槲覀兛床怀鰜硇D(zhuǎn)的方向，通過perspective屬性，指定觀察者與「z=0」平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果，單位是px;
設(shè)置了perspective屬性后，就有了近大遠(yuǎn)小的效果了，在視覺上，有3d透視的效果;
當(dāng)為元素定義 perspective 屬性時(shí)，其子元素會獲得透視效果。(給父元素加);

  body {
            /* perspective 給父元素加, 讓子元素?fù)碛薪筮h(yuǎn)小的透視效果 */
            /* 1. 沒有 perspective, 就沒有近大遠(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的空間布局，說白了，只有設(shè)置了preserve-3d，這個(gè)元素才能被稱之為3d元素。
一個(gè)3d元素可以沒有perspective，但是不能沒有transform-style

  body {
            transform-style: preserve-3d;
        }

5.案例

此案例用 transform-style: preserve-3d;來展示3d效果。代碼中詳細(xì)注釋，案例請到https://github.com/pengjunshan/WebPJS中查看

3d效果
<!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整體的父級 */
            /* 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)小的視覺效果 */
            /* 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元素可以沒有perspective，但是不能沒有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>魚香肉絲</span>
        </li>
        <li>
            <span>吃飯了嗎</span>
            <span>可樂雞翅</span>
        </li>
        <li>
            <span>吃飯了嗎</span>
            <span>山東煎餅</span>
        </li>
        <li>
            <span>吃飯了嗎</span>
            <span>天津包子</span>
        </li>
        <li>
            <span>吃飯了嗎</span>
            <span>歐洲牛排</span>
        </li>
    </ul>

</body>

</html>
animation動畫

animation是一個(gè)復(fù)合屬性，一共有8個(gè)參數(shù);
一般是由@keyframes先定義動畫，然后animation使用動畫。

1.animation-name:動畫名稱，由@keyframes定義的
2.animation-duration：動畫的持續(xù)時(shí)間
3.animation-timing-function：動畫的過渡類型
4.animation-delay：動畫的延遲時(shí)間
5.animation-iteration-count：動畫的循環(huán)次數(shù)
6.animation-direction：設(shè)置動畫在循環(huán)中是否反向運(yùn)動
7.animation-fill-mode：設(shè)置動畫時(shí)間之外的狀態(tài)
8.animattion-play-state:設(shè)置動畫的狀態(tài)。

動畫簡寫屬性

  • animation：動畫名稱 持續(xù)時(shí)間 運(yùn)動曲線 何時(shí)開始 播放次數(shù) 是否反方向 動畫起始或結(jié)束狀態(tài) ;
  • 簡寫屬性里面不包含 animation-play-state，暫停動畫：animation-play-state: puased; 經(jīng)常和鼠標(biāo)經(jīng)過等其他配合使用
圖片.png
<!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;
            /* 使用動畫 */
            /* animation: myAnimaiton 2s infinite; */
            /* 1. 動畫名稱 */
            animation-name: myAnimaiton;
            /* 2. 動畫執(zhí)行時(shí)間 */
            animation-duration: 2s;
            /* 3. 動畫執(zhí)行次數(shù) */
            /*animation-iteration-count: 2;*/
            /* infinite 無限次 */
            animation-iteration-count: infinite;
            /* 4. 延遲時(shí)間 */
            /*animation-delay: 1s;*/

            /* 5. 動畫效果 */
            /* animation-timing-function: linear; */
            /* steps(n) 按照步數(shù)執(zhí)行, 可以用來實(shí)現(xiàn)幀動畫 */
            /* animation-timing-function: steps(3); */

            /* 6. 動畫方向 */
            /* alternate 交替執(zhí)行, 可以讓動畫序列來回交替執(zhí)行 */
            /* animation-direction: alternate; */

            /* 7. 動畫最終狀態(tài) forwards 停留在最終動畫狀態(tài) */
            /*animation-fill-mode: forwards;*/

        }

        div:hover {
            /* 8. 動畫播放狀態(tài) */
            animation-play-state: paused;
        }

        /* 自定義動畫 */
        @keyframes myAnimaiton {
            0% {
                transform: scale(1.0)
            }

            100% {
                transform: scale(1.5)
            }
        }
    </style>
</head>

<body>
    <div>奔跑吧, 兄弟！</div>
</body>

</html>
動畫庫的使用

俗話說的好不會偷懶的程序員不是個(gè)好程序員，工作中手寫動畫比較麻煩，可以用第三方動畫庫來幫我們實(shí)現(xiàn)，我們只需引用第三方庫就行了；
一個(gè)用的比較多的動畫庫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. 引入動畫函數(shù)庫 -->
    <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動畫拷貝過來 可以進(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ì)好的動畫庫, 直接加類, animated, 選擇想要的動畫效果 添加效果類 -->
    <div class="animated bounceInRight">我是引用animate庫動畫</div>

    <!-- 直接把a(bǔ)nimate.css中找到bounceInRight動畫拷貝過來 可以進(jìn)行修改 -->
    <div class="box">我是修改animate庫動畫</div>

</body>

</html>
Html5
H5新增類名操作、自定義屬性操作

html5 新增一個(gè)非常簡單的操作類樣式的api:classList;
html5新增一個(gè)操作屬性樣式的api:dataset;

  • classList：四個(gè)操作樣式類的方法, 很簡單
  1. 添加類: dom.classList.add
  2. 移除類: dom.classList.remove
  3. 判斷類: dom.classList.contains
  4. 切換類: dom.classList.toggle
  • dataset：自定義屬性添加、修改、獲取
  1. 存的時(shí)候, 在屬性名前面加上 data-, <div class="pp" data-uage="18" data-uname="鵬鵬" data-sex="男"></div>
  2. 取的時(shí)候, 通過 dataset.屬性名取, 例如: box.dataset.uage 或者 box.dataset["uage"]
  3. 修改添加, 直接通過對象屬性操作方式操作即可例如: box.dataset.uage=12
  • 案例

代碼中詳細(xì)注釋，案例請到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è)非常簡單的操作類樣式的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("類名"); 有就刪除類名 沒有就添加類名
            div.classList.toggle("aa")

            let pg = document.getElementById("pgone")

            /*
            *   在之前的工作, 我們都是通過 getAttribute setAttribute 來操作自定義屬性的 
            *   html5 提供一個(gè)解決方案: dataset
            */
            //原生getAttribute
            console.log(pg.getAttribute("data-title"))

            //h5通過dataset
            console.log(pg.dataset.job);

            //添加或者修改屬性
            pg.dataset.love = "lxl"

        })
    </script>
</body>

</html>
H5網(wǎng)絡(luò)監(jiān)聽、地理位置監(jiān)聽

在移動端，我們經(jīng)常需要檢測設(shè)置是在線還是離線，HTML5為此定義了一個(gè)navigator.onLine屬性，這個(gè)屬性用于檢測設(shè)備是否聯(lián)網(wǎng);
在HTML規(guī)范中，增加了獲取用戶地理信息的API，這樣使得我們可以基于用戶位置開發(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)，會返回false;
2. 否則就是在線狀態(tài)，返回true;

if (navigator.onLine) {
  //有網(wǎng)
}else{
  //無網(wǎng)
}

2.監(jiān)聽網(wǎng)絡(luò)變化

為了更好的確定網(wǎng)絡(luò)是否連接，HTML5還定義了兩個(gè)事件，用于監(jiān)聽網(wǎng)絡(luò)狀態(tài)的變化。online:聯(lián)網(wǎng) offline：斷網(wǎng)

//網(wǎng)絡(luò)連接時(shí)會被調(diào)用
window.addEventListener("online", function () {
    alert("online");
});
//網(wǎng)絡(luò)斷開時(shí)會被調(diào)用
window.addEventListener("offline", function () {
    alert("offline");
});

3.獲取位置相關(guān)監(jiān)聽

在html5 中 提供了獲取用戶地理位置的 api，獲取位置的坐標(biāo)是 google地圖的坐標(biāo)；
navigator.geolocation.getCurrentPosition(successFuc, errorFuc);
參數(shù)1: 獲取位置成功的回調(diào)函數(shù), 會給我們一個(gè) location 參數(shù)對象;
參數(shù)2: 獲取位置失敗的回調(diào)函數(shù);
PC端: chrome,火狐定位請求的頁面要求要是https協(xié)議的, 所以PC端測試在IE下測試;
移動端: 在iOS 10中，蘋果對webkit定位權(quán)限進(jìn)行了修改，定位請求的頁面必須是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){
    // 定位成功會調(diào)用該方法
    // position.coords.latitude 緯度
    // position.coords.longitude 經(jīng)度
    // position.coords.accuracy 精度
    // position.coords.altitude 海拔高度
}, function(error){
    // 定位失敗會調(diào)用該方法
    // error 是錯(cuò)誤信息
});

4.案例

代碼中詳細(xì)注釋，案例請到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)聽網(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ǎng)
        * */
        if (navigator.onLine) {
            line.className = "online";
            line.innerHTML = "有網(wǎng)，可以打LOL";
        } else {
            line.innerHTML = "無網(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ǎng)，可以打單擊CF";
            line.className = "offline";
        })

        /*
        *   在html5 中 提供了獲取用戶地理位置的 api
        *   獲取位置的坐標(biāo)是 google地圖的坐標(biāo)
        *   navigator.geolocation.getCurrentPosition(successFuc, errorFuc)
        *   參數(shù)1: 獲取位置成功的回調(diào)函數(shù), 會給我們一個(gè) location 參數(shù)對象
        *   參數(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存儲

1.cookie

傳統(tǒng)方式，我們以document.cookie進(jìn)行存儲，但是存儲起來特別麻煩，并且，存儲大小只有4k，常用來做自動登錄，即存儲用戶的賬號和密碼信息。每次請求都會帶上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存儲cookie: 使用原生js操作cookie太過麻煩，尤其是cookie的獲取和刪除操作，使用jquery.cookie插件，能夠簡化我們的操作。
        //引入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)閉, 就沒了
    2.不能在多個(gè)窗口下共享數(shù)據(jù)
    3.大小為5M
  • localStorage
    1.永久存儲, 除非手動刪除
    2.可以在多個(gè)窗口下共享數(shù)據(jù)
    3.大小為5M
  • api:上面兩個(gè)api操作方式一模一樣
  1. 設(shè)置 setItem(key,value)
  2. 讀取 getItem(key)
  3. 刪除 removeItem(key)
  4. 清空所有 clear() 不要輕易用會把其它地方存儲的值都會清除掉

3.localStorage 中只支持存字符串

sessionStorage 可以存儲對象
localStorage不能存儲對象
var obj = {name: "鵬鵬", age: "18"}

  • 解決方法：
    1.可以轉(zhuǎn)換成 JSON 字符串再存儲：localStorage.setItem("obj", JSON.stringify(obj));
    2.拿到的是 JSON字符串再解析：JSON.parse(localStorage.getItem("obj"))
h5FileReader對象、拖拽效果

1.FileReader對象

通過FileReader對象我們可以讀取本地存儲的文件，可以使用 File 對象來指定所要讀取的文件或數(shù)據(jù)。
其中File對象可以是來自用戶在一個(gè) <input> 元素上選擇文件后返回的FileList 對象，也可以來自由拖放操作生成的 DataTransfer

  • files

對于file類型的input框，在這個(gè)DOM對象中，存在一個(gè)files屬性，這個(gè)屬性是FileList對象，是一個(gè)偽數(shù)組，里面存儲著上傳的所有文件，當(dāng)input框指定了multiple屬性之后，就可以上傳多個(gè)文件了。
也就是說，通過files這個(gè)屬性，我們就可以獲取到所有上傳的文件。

  • file對象

File對象中包含了文件的最后修改時(shí)間、文件名、文件類型等信息。

  • FileReader對象

FileReader是一個(gè)HTML5新增的對象，用于讀取文件。

//創(chuàng)建一個(gè)fileReader對象
var fr = new FileReader;
//讀取文件的兩個(gè)方法
readAsText() 以文本的方式讀取文件
readAsDataURL() 以DataURL形式讀取文件
//文件讀取完成事件：
fr.onload = function(){}
//當(dāng)文件讀取完成，可以通過result屬性獲取結(jié)果
fr.result

2.拖拽

  • 拖拽元素

頁面中設(shè)置了draggable="true"屬性的元素可以被拖拽，其中<img>、<a>標(biāo)簽?zāi)J(rèn)是可以被拖拽的；

  • 目標(biāo)元素, 事件監(jiān)聽

頁面中任何一個(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)元素上松開鼠標(biāo)時(shí)調(diào)用(瀏覽器默認(rèn)不讓拖拽，需要阻止 e.preventDefault()默認(rèn)行為。)
3.案例
代碼中詳細(xì)注釋，案例請到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對象，是一個(gè)偽數(shù)組，里面存儲著上傳的所有文件，
            console.log(input.files)
            // 1. 獲取文件
            let file = input.files[0];
            // 2. 創(chuàng)建文件讀取對象
            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("來呀，快活啊")
            // 瀏覽器默認(rèn)阻止了拖拽
            e.preventDefault();
        });
        // 當(dāng)拖拽元素在目標(biāo)元素上松開鼠標(biāo)時(shí)觸發(fā)
        target.addEventListener("drop", function (e) {
            console.log("進(jìn)來了")
            target.appendChild(source)
        })

    </script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容