視頻 播放
<!-- 自動(dòng)播放，控件捏境，靜音袍暴，寬贞言，高妄田，循環(huán)播放酱塔，圖片 -->
<video src="" autoplay="autoplay" controls="controls" muted ="muted"
width="" height="" loop="loop" poster="img/"></video>
<!-- 音頻 -->
<audio src="" autoplay ="" controls="" loop ="" muted=""></audio>
html5新增input類型
新增表單屬性
required required 表單不能為空
placeholder 提示文本 表單提示信息，可以修改字體顏色
autofocus autofocus 自動(dòng)聚焦到指定表單
autocomplete off/on 現(xiàn)實(shí)之前提交成功過(guò)的值平项，必須有name值
multiple multiple 多選文件提交
css3新特性
E[att] 選擇有att屬性的
E[att = "val"] 選擇att屬性等于val的
E[att^ = "val"] 選擇att屬性的值開頭是val的
E[att$ = "val"] 選擇att屬性的值結(jié)尾是val的
E[att* = "val"]選擇att屬性的值中有val 的
E：first-child 匹配父元素中第一個(gè)子元素
E：last-child
E：nth-child（n）匹配第n個(gè)子元素桥言，n可以是公式
E：nth-child（even）匹配偶數(shù)子元素
E：nth-child（odd）匹配奇數(shù)子元素
E：first-of-type 指定類型E的第一個(gè)
E：last-of-type 指定類型E的最后一個(gè)
E：nth-of-type（n） 指定類型E的第n個(gè)
偽元素選擇器
：：before在元素內(nèi)部的前面插入內(nèi)容
：：after在元素內(nèi)部的后面插入內(nèi)容
必須加content屬性
css3盒子模型
- box-sizing：content-box盒子大小為width+padding+border
- box-sizing：border-box 盒子大小為width
不擔(dān)心撐大盒子
圖片模糊
filter：blur（5px）；
blur是一個(gè)函數(shù)葵礼，數(shù)值越大越模糊
calc
width：calc（100% - 30px）
過(guò)渡
transition：要過(guò)渡的屬性 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開始
屬性：css屬性，寬度高度并鸵，內(nèi)外邊距鸳粉，all
花費(fèi)時(shí)間：秒，0.5s
運(yùn)動(dòng)曲線：默認(rèn)ease
何時(shí)開始：?jiǎn)挝皇敲朐暗＃J(rèn)0s
<style>
.box {
width: 300px;
height: 300px;
background-color: #0f0;
border: 2px solid red;
/* 改變一個(gè)屬性 */
transition: width 1s ease 1s;
改變多個(gè)屬性
transition: width 1s ease 1s,height 1s ease 1s;
改變所有屬性
transition: all 1s ease 0.5s;
}
.box:hover {
/* 屬性變化后的值 */
width: 400;
height: 400px;
background-color: black;
}
</style>
2D轉(zhuǎn)換
div {
width: 100px;
height: 100px;
background-color: #0f0;
/* 不會(huì)影響其他元素位置
沿著xy軸移動(dòng)
對(duì)行內(nèi)標(biāo)簽無(wú)效
百分比單位針對(duì)自身寬高
*/
transform: translate(200px,100px);
transform: translateX(100px);
transform: translateY(100px);
旋轉(zhuǎn)過(guò)渡
.xuanzhuan {
content: "";
width: 100px;
height: 100px;
background-color: #0f0;
margin: 100px auto;
transition: all 1s;
}
.xuanzhuan:hover {
transform: rotate(360deg);
}
縮放
div {
width: 200px;
height: 200px;
background-color: #0f0;
margin: 200px auto;
transition: all 1s;
}
div:hover {
/* transform: scale(150%, 30%); */
/* transform: scale(2, 0.5); */
transform: scale(0.5);
}
2D轉(zhuǎn)換綜合寫法
/* 順序會(huì)影響轉(zhuǎn)換 位移放前面*/
transform: translate(200px, 0)rotate(90deg)scale(2);
動(dòng)畫
/* 定義動(dòng)畫 */
@keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px);
}
}
div {
width: 100px;
height: 100px;
background-color: #0f0;
/* 調(diào)用動(dòng)畫 */
animation-name: move;
animation-duration: 3s;
}
動(dòng)畫屬性
div {
width: 100px;
height: 100px;
background-color: #0f0;
/* 動(dòng)畫名稱 */
animation-name: move;
/* 動(dòng)畫時(shí)間 */
animation-duration: 3s;
/* 運(yùn)動(dòng)曲線 */
animation-timing-function: ease-in-out;
/* 何時(shí)開始 */
animation-delay: 1s;
/* 重復(fù)次數(shù) */
/* animation-iteration-count: infinite; */
/*是否反方向播放 */
/* animation-direction: alternate; */
/* 是否回到起始位置 */
animation-fill-mode: forwards;
/* 簡(jiǎn)寫 */
animation: name duration timing-function delay iteration-count direction fill-mode;
animation: move 3s ease 1s infinite alternate;
}
div:hover {
/* 鼠標(biāo)經(jīng)過(guò)就停止動(dòng)畫 */
animation-play-state: paused;
}
