html5-css3

语义化标签

在 `IE9` 浏览器中，需要把语义化标签都转换为块级元素
 - `header`   ---  头部标签
 - `nav`        ---  导航标签
 - `article` ---   内容标签
 - `section` ---   块级标签
 - `aside`     ---   侧边栏标签
 - `footer`   ---   尾部标签
		header,
        nav,
        section {
            display: block;
            height: 120px;
            background-color: pink;
            margin: 10px;
        }

多媒体标签音频标签

<!-- <audio src="media/snow.mp3" controls="controls"></audio> -->
    <audio controls="controls">
        <source src="media/snow.mp3" type="audio/mpeg" />
        <source src="media/snow.ogg" type="audio/ogg" />
            您的浏览器不支持播放声音
    </audio>

多媒体标签视频标签

<!-- <video src="media/video.mp4" controls="controls"></video> -->
    <!-- 谷歌浏览器把自动播放功能给禁用了 有解决方案： 给视频添加静音属性 -->
    <video muted="muted" loop="loop" poster="media/pig.jpg" controls>
        <source src="media/video.mp4" type="video/mp4" />
        <source src="media/video.ogg" type="video/ogg" />
        您的浏览器太low了，不支持播放此视频
    </video>

HTML5新增input表单

<form action="">
        <ul>
            <li>邮箱: <input type="email" /></li>
            <li>网址: <input type="url" /></li>
            <li>日期: <input type="date" /></li>
            <li>日期: <input type="time" /></li>
            <li>数量: <input type="number" /></li>
            <li>手机号码: <input type="tel" /></li>
            <li>搜索: <input type="search" /></li>
            <li>颜色: <input type="color" /></li>
            <li> <input type="submit" value="提交"></li>
        </ul>
    </form>

HTML5新增表单属性

<form action="">
    用户名: <input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" name="username" autocomplete="off">
     <input type="submit" value="提交"> 
     上传头像: <input type="file" name="" id="" multiple="multiple">
 </form>

CSS3属性选择器

	 /* 属性选择器使用方法 */
	 /* 选择的是：  既是button 又有 disabled 这个属性的元素 */
	  /* 属性选择器的权重是 10 */
	 /* 1.直接写属性 */
	  /*权重为11*/
	  button[disabled] {
	      cursor: default;
	  }
   		/* 2. 属性等于值 */
        input[type="search"] {
            color: pink;
        }
        /* 3. 以某个值开头的 属性值 */
        div[class^="icon"] {
            color: red;
        }
        /* 4. 以某个值结尾的 */
        div[class$="icon"] {
            color: green;
        }
        /* 5. 可以在任意位置的 */
        div[class*="icon"] {
            color: blue;
        }
<button disabled="disabled">按钮</button>
 <input type="search" name="" id="" value="搜索框">
 <div class="icon1">图标1</div>
 <div class="absicon">图标5</div>    

CSS3结构伪类选择器

 /*第一个孩子li变*/
 ul li:first-child {
 	 background-color: pink;
  }
  /*最后一个孩子li变*/
  ul li:last-child {
      background-color: deeppink;
  }
  /* nth-child(n)  我们要第几个，n就是几  比如我们选第8个， 我们直接写 8就可以了 */
  ul li:nth-child(8) {
      background-color: lightpink;
  }

nth-child

 		/* n 可是关键词  even 是偶数  odd 是奇数 */
        /* ul li:nth-child(even) {
            background-color: pink;
        }
        
        ul li:nth-child(odd) {
            background-color: hotpink;
        } */
        /* n 是公式  但是 n 从0开始计算 但是第 0 个元素或者超出了元素的个数会被忽略*/
        /* ul li:nth-child(n) {
            background-color: pink;
        } */
        /* 2n 偶数  类似于 even */
        /* ul li:nth-child(2n) {
            background-color: pink;
        } */
        /* 2n + 1  类似于 odd */
        /* ul li:nth-child(2n+1) {
            background-color: skyblue;
        } */
        /* 5n  选择第  0  5  10  15 ... */
        /* ul li:nth-child(5n) {
            background-color: pink;
        } */
        /* n+5 就是从第5个开始往后面选择 包含第5个 */
        /* ul li:nth-child(n+5) {
            background-color: pink;
        } */
        /* -n + 5 就是选择前面5个  */
        ul li:nth-child(-n+5) {
            background-color: pink;
        }

nth-of-type

        /* div span:nth-child(1) {  这个选不到，既是第一个孩子有时span标签
            background-color: pink;
        } */
        div span:nth-child(2) {
            background-color: pink;
        }
        /* 总结： :nth-child(n)  选择 父元素里面的 第 n个孩子， 它不管里面的孩子是否同一种类型 */
        /* of-type 选择指定类型的元素 */
        div span:first-of-type {
            background-color: purple;
        }
         /* span最后一个 */
        div span:last-of-type {
            background-color: skyblue;
        }
         /* span第二个 */
        div span:nth-of-type(2) {
            background-color: red;
        }

 <div>
      <p>我是一个屁</p>
       <span>我是span</span>
       <span>我是span</span>
   </div>
   <!-- ul 里面我们只允许放li  所以 nth-child 和 nth-of-type 就一样了 -->
   <ul>
       <li></li>
    	......
   </ul>

CSS3伪元素选择器

- `before` 和 `after` 必须有 `content` 属性
- `before` 在内容前面，after 在内容后面
- `before` 和 `after` 创建的是一个元素，但是属于行内元素
- 创建出来的元素在 `Dom` 中查找不到，所以称为伪元素
- 伪元素和标签选择器一样，权重为 1
div::before {
          content: "我";
          display: inline-block;
          width: 100px;
          height: 100px;
          background-color: pink;
}     
 div::after {
          content: "小猪佩奇";
          display: inline-block;
          width: 100px;
          height: 100px;
          background-color: pink;
 }

伪元素选择器案例

p::after {
            content: '\ea50';
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
}
 <p></p>

2D转换(transform)之旋转rotate

img {
            width: 150px;
            /* 顺时针旋转45度 */
            /* transform: rotate(45deg); */
            border-radius: 50%;
            border: 5px solid pink;
            /* 过渡写到本身上，谁做动画给谁加 */
            transition: all 0.3s;
 }
        
img:hover {
            transform: rotate(360deg);
}

CSS3书写三角

 div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.2s;
 }
 /* 鼠标经过div  里面的三角旋转 */
 div:hover::after {
            transform: rotate(225deg);
 }

设置元素转换中心点(transform-origin)

/* 1.可以跟方位名词 */
/* transform-origin: left bottom; */
/* 2. 默认的是 50%  50%  等价于 center  center */
/* 3. 可以是px 像素 */
transform-origin: 50px 50px;

旋转中心点案例

  div {
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 10px;
            float: left;
        }
        
        div::before {
            content: "黑马";
            display: block;
            width: 100%;
            height: 100%;
            background-color: hotpink;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 0.4s;
        }
        /* 鼠标经过div 里面的before 复原 */
        
        div:hover::before {
            transform: rotate(0deg);
        }

2D转换之缩放scale

用来控制元素的放大与缩小，可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
        div:hover {
            /* 1. 里面写的数字不跟单位 就是倍数的意思 1 就是1倍  2就是 2倍 */
            /* transform: scale(x, y); */
            /* transform: scale(2, 2); */
            /* 2. 修改了宽度为原来的2倍  高度 不变 */
            /* transform: scale(2, 1); */
            /* 3. 等比例缩放 同时修改宽度和高度，我们有简单的写法  以下是 宽度修改了2倍，高度默认和第一个参数一样*/
            /* transform: scale(2); */
            /* 4. 我们可以进行缩小  小于1 就是缩放 */
            /* transform: scale(0.5, 0.5); */
            /* transform: scale(0.5); */
            /* 5. scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点*/
            /* width: 300px;
            height: 300px; */
            transform: scale(2);
        }

图片放大案例

 	   div {
            overflow: hidden;
            float: left;
            margin: 10px;
        } 
        div img {
            transition: all .4s;
        }
        div img:hover {
            transform: scale(1.1);
        }

2D转换综合写法顺序

div:hover {
     /* transform: rotate(180deg) translate(150px, 50px); */
     /* 我们同时有位移和其他属性，我们需要把位移放到最前面 */
     transform: translate(150px, 50px) rotate(180deg) scale(1.2);
 }

CSS3动画基本使用

 /* 我们想页面一打开，一个盒子就从左边走到右边 */
        /* 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;
        }

动画序列

 /* from to 等价于  0% 和  100% */
        /* @keyframes move {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(1000px, 0);
            }
        } */
        /* 动画序列 */
        /* 1. 可以做多个状态的变化 keyframe 关键帧 */
        /* 2. 里面的百分比要是整数 */
        /* 3. 里面的百分比就是 总的时间（我们这个案例10s）的划分 25% * 10  =  2.5s */
        
        @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;
        }

动画属性

 @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(1000px, 0);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            /* animation-duration: 2s; */
            /* 运动曲线 */
            /* animation-timing-function: ease; */
            /* 何时开始 */
            animation-delay: 1s;
            /* 重复次数  iteration 重复的 conut 次数  infinite  无限 */
            /* animation-iteration-count: infinite; */
            /* 是否反方向播放 默认的是 normal  如果想要反方向 就写 alternate */
            /* animation-direction: alternate; */
            /* 动画结束后的状态 默认的是 backwards  回到起始状态 我们可以让他停留在结束状态 forwards */
            /* animation-fill-mode: forwards; */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            /* animation: move 2s linear 0s 1 alternate forwards; */
            /* 前面2个属性 name  duration 一定要写 */
            /* animation: move 2s linear  alternate forwards; */
        }
        
        div:hover {
            /* 鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */
            animation-play-state: paused;
        }

动画属性简写

  /* 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` 
 animation: move 2s linear 1s infinite alternate forwards;

大数据热点图

.city div[class^="pulse"] {
            /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            position: absolute;
            top: 50%;
            left: 50%;
            /* 走自身盒子一半 */
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }
        .city div.pulse2 {
            animation-delay: 0.4s;
        }

速度曲线步长

 div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* 让我们的文字强制一行内显示 */
            white-space: nowrap;
            /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
            animation: w 4s steps(10) forwards;
        }
        
        @keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 200px;
            }
        }

奔跑的熊大案例

 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;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }

透视 perspective

 -产生 `3D` 效果需要透视
- 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离
 - 距离视觉点越近的在电脑平面成像越大，越远成像越小
 - 透视的单位是像素
- **透视需要写在被视察元素的父盒子上面**
- 注意下方图片
- d：就是视距，视距就是指人的眼睛到屏幕的距离
- z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大(物体离得越近)
/* 透视写到被观察元素的父盒子上面 */
perspective: 200px;

左手准则

 - 左手的手拇指指向 x 轴的正方向
Y轴一样
- 其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向(正值)

3D移动translate3d

body {
            /* 透视写到被观察元素的父盒子上面 */
            perspective: 200px;
        }   
div {
        /* transform: translateX(100px);
         transform: translateY(100px); */
         /* transform: translateX(100px) translateY(100px) translateZ(100px); */
         /* 1. translateZ 沿着Z轴移动 */
         /* 2. translateZ 后面的单位我们一般跟px */
         /* 3. translateZ(100px) 向外移动100px （向我们的眼睛来移动的） */
         /* 4. 3D移动有简写的方法 */
         /* transform: translate3d(x,y,z); */
         /* transform: translate3d(100px, 100px, 100px); */
         /* 5. xyz是不能省略的，如果没有就写0 */
         transform: translate3d(400px, 100px, 100px);
        }

rotateX

 body {
            perspective: 300px;
}
 img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
 }
 img:hover {
            transform: rotateX(45deg);
  }

rotateY

img:hover {
   transform: rotateY(45deg);
}

rotateZ

 img:hover {
      /* transform: rotateZ(180deg); */
      /* transform: rotate3d(x,y,z,deg); */
      /* transform: rotate3d(1, 0, 0, 45deg); */
      /* transform: rotate3d(0, 1, 0, 45deg); */
      transform: rotate3d(1, 1, 0, 45deg);
  }

3D呈现transform-style

/* 让子元素保持3d立体空间环境 加在父极盒子中但是影响的是子盒子*/
flat代表子元素不开启 3D 立体空间，默认的
 transform-style: preserve-3d;

3D导航栏案例

ul>li>.box>.front+.bottom
ul li {
     /* 一会我们需要给box 旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */
     perspective: 500px;
 }

综合案例旋转木马

body {
            perspective: 1000px;
}
        
section {
            transform-style: preserve-3d;
            /* 添加动画效果 */
            animation: rotate 10s linear infinite; 
} 
 section:hover {
            /* 鼠标放入section 停止动画 */
            animation-play-state: paused;
}