目录

一.HTML5（取代 HTML4 + XHTML）

二.CSS3选择器

三.2D 转换（transform）

四.动画（animation）

五.3D 转换

一.HTML5（取代 HTML4 + XHTML）

广义上的 HTML5：拥有强大的技术集，这些技术是指： HTML5、CSS3 、javascript

1.语义化标签

新增语义化标签：

语义化标签：针对搜索引擎，可多次使用，移动端支持比较友好

在“IE9”浏览器中，需要把语义化标签转换成块级元素
        header,
        nav,
        section {
            
            display: block;
            ...
        }
<body>
    
    <header> header </header>
    <header> header </header>
    ...
</body>
2.音/视频标签

audio 音频标签：

不同浏览器支持不同格式，所以要准备多个音频文件，会按照资源给的顺序播放音频

一般 .ogg .mp3 可以支持绝大部分浏览器

chrome 禁用了 autoplay 属性，除非静音播放，muted 属性（静音播放）

controls：显示播放按钮等控件

loop：循环播放

poster：未播放时展示的海报
  <audio src="media/snow.mp3" controls autoplay></audio>
  <audio controls>
    <source src="media/snow.mp3" type="audio/mpeg" />
    <source src="media/snow.ogg" type="audio/ogg" />
            您的浏览器不支持播放声音（ 此文字在上述两种音频均不可用时出现 ）
  </audio>
video 视频标签：
  
  <video controls="controls" autoplay muted loop poster="media/pig.jpg">
    <source src="media/video.mp4" type="video/mp4">
    <source src="media/video.ogg" type="video/ogg">
  </video>
3.input 标签

type="email" ：限制用户输入必须为Email类型

type="url" ：限制用户输入必须为URL类型

type="date / time" ：限制用户输入必须为日期 / 时间类型

type="number" ：限制用户输入必须为数字类型

type="tel" ：限制用户输入必须为手机号码

type="search" ：搜索框会出现 x 方便一次删除输入内容

type="color" ：生成一个颜色选择表单

4.表单属性

required ：内容不能为空

placeholder ：提示文本，存在默认值将不显示

autofocus ：自动聚焦

autocomplete ："off / on" 浏览器会提示历史输入，为了隐私一般设置为off

multiple ：多选文件提交，file默认选一个文件
用户名: <input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" name="username" autocomplete="off"> 
<input type="submit" value="提交"> 上传头像: 
<input type="file" name="" id="" multiple="multiple">

二.CSS3选择器

CSS3现状：浏览器支持度差，需要添加私有前缀，移动端优于PC端

1.属性选择器 [ ]

类选择器、属性选择器、权重为 10

        /* 选择的是：  既是button 又有 disabled 这个属性的元素 */
        button[disabled] {} /* 1.直接写属性 */ 
        input[type="search"] {} /* 2. 属性等于值 */         
        div[class^="icon"] {} /* 3. 以某个值开头的 属性值 */  
        div[class$="icon"] {} /* 4. 以某个值结尾的 */
        div[class*="icon"] {} /* 5. 可以在任意位置的 */ 
<body>
    <button disabled="disabled">按钮</button>
    <div class="icon1">图标1</div>
    <div class="iicon3">图标4</div>
    <div class="absicon">图标5</div>
</body>

2.结构伪类选择器：

类选择器、属性选择器、权重为 10

    <style>
        ul li:first-child {}    /* 父元素中第一个子元素 */
        ul li:last-child {}    /* 父元素中最后一个子元素 */
        ul li:nth-child(8) {}     /* 父元素中第n个子元素 */
        /* n 可是关键词  even 是偶数 odd 是奇数 */
        /* n 可是公式  2n 是偶数 2n+1 是奇数 5n 是5的倍数 */
        ul li:nth-child(even/2n) {}
        ul li:nth-child(-n+5) {} /* -n + 5 就是选择前面5个  */

        /* div span:nth-child(1) {选不到span 会选择出p 因为p是div的第一个子元素} */
/* 总结： :nth-child(n)  选择父元素里面的 第n个孩子， 它不管里面的孩子 是span还是p */
        /*选择 span 的方法 */
        div span:first-of-type {}
        div span:last-of-type {}   
        div span:nth-of-type(2) {}
    </style>
<body>
    <div>
        <p>我是一个p标签</p>
        <span>我是span标签</span>
        <span>我是span标签</span>
    </div>

    <!-- ul 里面我们只允许放li  所以 nth-child = nth-of-type -->
    <ul>
        <li>1</li>
        ...
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</body>

区分 nth-child 和 nth-of-type：

nth-child 选择父元素里面的第几个子元素，子元素可能不是同种类型，如span p同等看待
nth-of-type 选择指定类型的元素

3.伪元素选择器 ::

伪类选择器，权重为 1

        div::before {  
            content: "我"; /* before 和 after 必须有 content 属性，可以为空 */
            /* before 和 after 创建的是一个行内元素，要转换类型设置宽高 */
            display: inline-block;
            width: 100px;
            ...}
        div::after {
            content: "小猪佩奇";
            ...}
<body>
    <div>是</div>
</body>

伪类选择器注意事项：

before 和 after 必须有 content 属性
before 在内容前面，after 在内容后面
before 和 after 创建的是一个行内元素，要转换为行内块元素设置宽高
创建出来的元素在 DOM 中查找不到，所以称为伪元素
伪元素权重为 1

应用：伪元素字体图标：

        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?cv013x');
            ...}       
         p::after {
            content: '\ea50'; /* 字体图标代码，可自行查看 */
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';  /* 务必务必务必不要忘记字体图标需要引用自定义字体！ */
        }
<body>
    <p></p>
</body>

三.2D 转换（transform）

1.定义

2D 转换：改变标签在二维平面上的位置和形状，元素如下：

移动： translate

旋转： rotate

缩放： scale

2.translate 语法（移动）

2D 移动指：水平X、垂直Y方向上的移动，类似定位

transform: translate(x, y); ：transform: translate(100px, 100px);

transform:translate:(50%,50%);：%是相对于本身的宽高计算的

只移动x座标：

transform: translate(100px, 0);

transform: translateX(100px);

translate 对行内元素是无效的，比如给 <span>设置，不会生效

拓展：让盒子实现水平垂直居中，使用 translate 就不需要计算了

translate(-50%, -50%) ：盒子往上往左走，自己高度的一半

3.rotate 语法（旋转）

rotate() 里面跟度数，单位是 deg

角度为正时，顺时针，角度为负时，逆时针

默认旋转的中心点是：元素中心点

CSS书写三角形并旋转：
        div {
            position: relative;
            ...}    
        div::after {/* 伪类选择器相当于 添加行内元素 absolute自动使之变成块元素 */
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;  /* 只让右边和底边显示 构造一个直角 */
            border-bottom: 1px solid #000;
            transform: rotate(45deg); /* 顺时针旋转直角45° 使之看起来向下 */
            transition: all 0.2s; /* 过渡写到本身上，谁做动画给谁加 */
        }
        /* 鼠标经过div  里面的三角旋转 */
        div:hover::after {
            transform: rotate(225deg);  /* 使直角向上旋转 注意旋转角度225 = 45 + 180 */
        }
<body>
    <div></div>
</body>
设置旋转中心点：transform-origin:x y

注意：x 和 y 用空格隔开

x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center

可以给 x y 设置像素：transform-origin: 50px 50px;

可以给 x y 设置方位名词：transform-origin: left bottom;

4.scale 语法（缩放）

注意：x 与 y使用逗号进行分隔

transform: scale(2): 只写一个参数，第二个参数就和第一个参数一致，宽高都放大两倍

transform:scale(0.5, 1): 宽缩小一倍，高保持不变

scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

分页按钮实例：
        li {
            float: left;width: 30px;height: 30px;
            border: 1px solid pink;margin: 10px;
            text-align: center;line-height: 30px;list-style: none;
            border-radius: 50%; cursor: pointer;
            transition: all .4s; }
        li:hover {
            transform: scale(1.2);}
<body>
    <ul>
        <li>1</li>
        ...
        <li>7</li>
    </ul>
</body>
5.2D 转换综合写法

同时使用多个转换，其格式为 transform: translate() rotate() scale()

transform: translate(150px, 50px) rotate(180deg) scale(1.2);

顺序会影响到转换的效果(先旋转会改变座标轴方向)，位移放到最前面

四.动画（animation）

1.动画使用步骤

定义动画：@keyframes...

调用定义好的动画
        /* 1. 定义动画 */
        @keyframes move {
            0% {transform: translateX(0px);            /* 开始状态 */}
            100% {
                transform: translateX(1000px);         /* 结束状态 */}
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        /* 2. 调用动画 */
            animation-name: move;            /* 动画名称 */
            animation-duration: 2s;          /* 持续时间 */  
        }
2.动画序列

0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列

from to 等价于 0% 和 100%
        /* @keyframes move {
            from { transform: translate(0, 0);}
            to { transform: translate(1000px, 0);} } */
        @keyframes move {
            0% {transform: translate(0, 0);}
            25% {transform: translate(1000px, 0);}
            50% {transform: translate(1000px, 500px);}
            75% {transform: translate(0, 500px);}
            100% {transform: translate(0, 0);}}
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: move;
            animation-duration: 10s;
        }
3.动画常见属性

@keyframes ：规定动画，关键帧

animation ：所有动画属性的简写属性，除了 animation-play-state 属性

animation-name（必写）：规定 @keyframes 动画的名称

animation-duration（必写）：规定动画完成一个周期所花费的秒或毫秒，默认是0

animation-timing-function ：规定动画的速度曲线，默认是“ease”先快后慢再快 “linear”匀速

animation-delay：规定动画何时开始，默认是0

animation-iteration-count ：规定动画重复播放的次数，默认是1，还有 infinite"无限循环"

animation-direction ：规定动画是否在下一周期逆向播放，默认是 “normal“, alternate"逆播放”

animation-play-state ：规定动画是否播放或暂停，默认是 "running", 还有 "pause"，鼠标经过暂停

animation-fill-mode ：规定动画结束后状态，保持现状 forwards 回到起始 backwards

4.动画简写

animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向起始与结束状态

animation: name duration timing-function delay iteration-count direction fill-mode

简写属性里面不包含 animation-paly-state

暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用

要想动画走回来，而不是直接调回来：animation-direction: alternate

盒子动画结束后，停在结束位置：animation-fill-mode: forwards

动画实例之大数据热点图：

5.速度曲线 steps()

模仿打印机打字效果用到 steps()：分几步来完成动画
        div {
            font-size: 20px;
            width: 0;
            height: 30px;
            white-space: nowrap; /* 让文字强制一行内显示*/
            overflow: hidden;
            /* steps 就是分几步来完成动画 有了steps 就不写 ease / linear */
            animation: w 4s steps(10) forwards停留在打印完的样子;
        }
        @keyframes w {
            0% { width: 0;}
            100% { width: 200px;} /* 总共10个字，每个字像素20px，10*20=200 模仿打印 */
        }
<body>
    <div>世纪佳缘我在这里等你</div>
</body>
6.奔跑的熊

结论：元素可以添加多个动画，用逗号分隔
       div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 元素可以添加多个动画， 用逗号分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }
        @keyframes bear {/* 这个动画是实现熊的跑步动作 通过让背景图左移实现 */
            0% {background-position: 0 0; }
            100% {/* 熊的背景图片是向左走的 所以是负值 左上负 右下正 */
                background-position: -1600px 0; }}
        @keyframes move {/* 这个动画是实现熊的位移 */
            0% { left: 0; } /* 左移自身的 50% 实现居中效果 */
            transform: translateX(-50%);}}
<body>
    <div></div>
</body>

五.3D 转换

1.三维座标系

x 轴：水平向右 -- 注意：x 轴右边是正值，左边是负值

y 轴：垂直向下 -- 注意：y 轴下面是正值，上面是负值

z 轴：垂直屏幕 -- 注意：往外边的是正值，往里面的是负值

2.3D 转换元素

3D 位移：translate3d(x, y, z)

3D 旋转：rotate3d(x, y, z)

透视：perspctive

3D呈现：transfrom-style

3.3D 位移 translate3d()

3D 位移：在 2D 移动的基础上多加了 z 轴移动方向

transform: translateX(100px)：仅在 x 轴上移动

transform: translateZ(100px)：仅仅是在 z 轴上移动，此处只能跟 px单位

transform: translate3d(x, y, z)：x, y, z 对应的值不能省略，可用 0 进行填充

因为z轴是垂直屏幕，由里指向外面，所以默认 看不到元素在z轴的方向上移动，除非设置透视

4.透视 perspective

想要网页产生 3D 效果需要 透视，单位：像素

透视也称视距，即人的眼睛到屏幕的距离

视距越小成像越大，越大成像越小

注意：透视需要写在 被视察元素 的 父盒子 上面
        body {
            perspective: 200px; /* 透视写到被观察元素的父盒子上面 */ }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: translate3d(100px, 100px, 0); /* xyz是不能省略的，没有就写0 */
        }
translateZ 与 perspecitve 的区别：perspecitve 给父级进行设置，translateZ 给子元素进行设置

translateZ(100px)：仅仅是在Z轴上移动，看不到变化；有了透视，就能看到translateZ 引起的变化

5.3D 旋转 rotate3d()

左手准则：左手的手拇指指向 x 轴的正方向，其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向

transform: rotateX(45deg)：沿着 x轴正方向旋转 45 度

transform: rotateY(45deg)：沿着 y轴正方向旋转 45 度

两面翻转盒子实例：

用大盒子 box 包裹住子盒子 front + back，给 body 设置透视

大盒子 box 在鼠标经过时会绕着 y轴旋转180°

子盒子 back 本身需要旋转180° 和 front 实现背靠背的效果

为保证子盒子本身旋转实现，要给父盒子添加 transform-style 属性来保留子盒子立体空间

transform: rotate3d(x, y, z, deg)：沿着自定义轴旋转， deg 为角度

x, y, z 表示旋转轴的矢量，表示是否沿着该轴进行旋转，最后一个标识旋转的角度

transform: rotate3d(1, 1, 0, 45deg) -- 沿着对角线旋转 45deg

transform: rotate3d(1, 0, 0, 45deg) -- 沿着 x 轴旋转 45deg

6.3D 呈现 transform-style（重要）

transform-style: preserve-3d 子元素开启立体空间，默认的值是 flat 不开启

代码写给父级，但是影响的是子盒子
    <style>
        body {
            perspective: 500px;     /* 透视效果 */  }
        .box {
            position: relative;
            ...
            transition: all 2s;
            /* 让子元素保持3d立体空间环境 */
            transform-style: preserve-3d;   /* 若不设置 紫色盒子就无法绕着 x轴旋转60° */
        }        
        .box:hover {
            transform: rotateY(60deg);     /* 父亲盒子绕着 y轴转60° */}        
        .box div {
            position: absolute;
            ...
            background-color: pink; }        
        .box div:last-child {  
            background-color: purple;   /* 紫色盒子绕着x轴转60° */
            transform: rotateX(60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>
7.3D 导航栏

用父盒子 ul-li 包裹住子盒子box ，box 再包住 front 和 bottom

给 li 设置透视，box 设置 transf-style 来保持 front 和 bottom 的立体空间，动画效果（鼠标经过 box 沿着x轴转9.°）

front 盒子设置 z-index: 1保持永远在上，transform: translateZ(17.5px); 保证旋转中心在屏幕里面17.5px处

bottom 盒子设置transform: translateY(17.5px) rotateX(-90deg); 保证顶部对齐front 且面朝下先移动再旋转
        ul li {
            /* 需要给box 旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */
            perspective: 500px;}
        .box {
            position: relative;
            transform-style: preserve-3d;
            ...
            transition: all .4s;
        }        
        .box:hover {
            transform: rotateX(90deg); }        
        .front,
        .bottom {
            position: absolute;
            ...}        
        .front {
            background-color: pink;
            z-index: 1;
            transform: translateZ(17.5px);
        }        
        .bottom {
            background-color: purple;
            /* x轴一定是负值 */
            /* 如果有移动 或者其他样式，必须先写我们的移动 */
            transform: translateY(17.5px) rotateX(-90deg);
        }
        <ul>
        <li>
            <div class="box">
                <div class="front">第五人格</div>
                <div class="bottom">茶茶子等你</div>
            </div>
        </li>
        ...
8.3D 旋转木马

搭建HTML结构：

<section>

<div></div>...<div></div>

</section>

里面的6个div 分别是 6个狗狗图片，注意最终旋转是 section标签旋转

CSS样式：

① 给body添加透视效果 perspective: 1000px;

② 给section 添加大小，一定不要忘记添加 3d呈现效果控制里面的6个div

注意：别忘记子绝父相，section要加相对定位

③ 里面6个div 全部绝对定位叠到一起，然后旋转不同角度和移动距离

注意：旋转角度用rotateY 距离用translateZ

④ 给section 添加动画 animation ，让它可以自动旋转即可

源码展示：
    <style>
        body {
            perspective: 1000px;}       
        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            transform-style: preserve-3d;    /*保持子盒子div 3D立体空间*/
            /* 添加动画效果 */
            animation: rotate 10s linear infinite;
        }   
        section:hover {
            animation-play-state: paused;    /* 鼠标放入section 停止动画 */
        }        
        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }
            100% {
                transform: rotateY(360deg);
            } }        

        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(media/dog.jpg) no-repeat;
        }        
        section div:nth-child(1) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(0) translateZ(300px);
        }  
        section div:nth-child(2) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(60deg) translateZ(300px);
        }
        ...
        section div:nth-child(6) {
            /* 先旋转好了再 移动距离 */
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        
    </section>
</body>
9.浏览器私有前缀

浏览器私有前缀是 兼容老版本 的写法，比较新版本的浏览器无须添加

-moz-：代表 firefox 浏览器私有属性

-ms-：代表 ie 浏览器私有属性

-webkit-：代表 safari、chrome 私有属性

-o-：代表 Opera 私有属性

提倡写法：
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
-o-border-radius: 10px; 
border-radius: 10px;

前端开发基础（四）——HTML5 / CSS3 进阶

一.HTML5（取代 HTML4 + XHTML）

1.语义化标签

2.音/视频标签

3.input 标签

4.表单属性

二.CSS3选择器

1.属性选择器 [ ]

2.结构伪类选择器：

3.伪元素选择器 ::

三.2D 转换（transform）

1.定义

2.translate 语法（移动）

3.rotate 语法（旋转）

4.scale 语法（缩放）

5.2D 转换综合写法

四.动画（animation）

1.动画使用步骤

2.动画序列

3.动画常见属性

4.动画简写

5.速度曲线 steps()

6.奔跑的熊

五.3D 转换

1.三维座标系

2.3D 转换元素

3.3D 位移 translate3d()

4.透视 perspective

5.3D 旋转 rotate3d()

6.3D 呈现 transform-style（重要）

7.3D 导航栏

8.3D 旋转木马

9.浏览器私有前缀

Vue 基礎面試

前端性能優化——加載優化、渲染優化

數據挖掘課堂筆記（一）緒論、數據預處理、聚類分析

Android課堂筆記（十）——位置、SMS、通話

前端開發基礎（四）——HTML5 / CSS3 進階

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

前端开发基础（四）——HTML5 / CSS3 进阶

一.HTML5（取代 HTML4 + XHTML）

1.语义化标签

2.音/视频标签

3.input 标签

4.表单属性

二.CSS3选择器

1.属性选择器 [ ]

2.结构伪类选择器 ：

3.伪元素选择器 ::

三.2D 转换（transform）

1.定义

2.translate 语法（移动）

3.rotate 语法（旋转）

4.scale 语法（缩放）

5.2D 转换综合写法

四.动画（animation）

1.动画使用步骤

2.动画序列

3.动画常见属性

4.动画简写

5.速度曲线 steps()

​6.奔跑的熊

五.3D 转换

1.三维座标系

2.3D 转换元素

3.3D 位移 translate3d()

4.透视 perspective

5.3D 旋转 rotate3d()

6.3D 呈现 transform-style（重要）

7.3D 导航栏

8.3D 旋转木马

9.浏览器私有前缀

2.结构伪类选择器：

6.奔跑的熊