柚子快報邀請碼778899分享：HTML5-css3筆記
柚子快報邀請碼778899分享：HTML5-css3筆記
HTML筆記
文章目錄
**HTML筆記**第一章 HTML5基礎(chǔ)1.1**標(biāo)簽（元素、節(jié)點）**1.2屬性1.3html標(biāo)簽1.4注釋1.5特殊符號1.6路徑
第二章 列表、表格、媒體元素2.1列表2.2表格2.3視頻播放器2.4html 結(jié)構(gòu)元素2.5 iframe 內(nèi)聯(lián)框架
第三章 表單3.1**表單元素**3.1.1表單格式3.1.2**表格元素格式**3.1.3**元素屬性**3.1.4**元素標(biāo)注**3.1.5 表單初級驗證
第四章 初始css4.1 選擇器4.2 css引入方式4.2.1 行內(nèi)式
4.2.2 內(nèi)嵌式4.2.3 外部樣式4.3 選擇器4.3.1**基本選擇器**4.3.2 **層次選擇器**4.3.3 **屬性選擇器**
第五章 CSS美化5.1 字體樣式5.1.1 font-family字體類型5.1.2 font-size字體大小5.1.3 font-style字體風(fēng)格5.1.4 font-weight字體粗細(xì)5.1.5 font屬性
5.2 文本屬性5.2.1 text-align:屬性值如下5.2.2 text-decoration:屬性值如下5.2.3 text-shadow文本陰影
5.3 color屬性5.4 超鏈接樣式5.5 list-style-type列表樣式5.6 background-color背景顏色5.7 background-img背景圖像5.7.1 背景重復(fù)方式
5.8 background-position背景定位5.9 背景屬性簡寫5.10 background-size背景尺寸5.11 linear-gradient漸變
第六章 盒子模型6.1 border邊框6.2 border-width粗細(xì)6.3 border-style邊框樣式6.4 border簡寫6.5 margin外邊距6.6 padding內(nèi)邊距6.7 盒子模型尺寸6.8 box-sizing6.9 border-radius圓角邊框6.9.1 制作圓形6.9.2 半圓6.9.3 四分之一圓
6.10 box-shadow盒子陰影
第七章 浮動7.1 display7.2 float屬性/浮動7.3 解決邊框塌陷問題
第八章 定位8.1 position屬性8.2 z-index屬性
第九章 動畫9.1 transform動畫9.2 transition過渡動畫9.3 定義動畫
十、附屬8.2 z-index屬性
第九章 動畫9.1 transform動畫9.2 transition過渡動畫9.3 定義動畫
十、附屬
第一章 HTML5基礎(chǔ)
1.1標(biāo)簽（元素、節(jié)點）
開標(biāo)簽 關(guān)標(biāo)簽（閉合標(biāo)簽）
你好
1.2屬性
屬性名=“屬性值”
1.3html標(biāo)簽 標(biāo)題標(biāo)簽
-標(biāo)題標(biāo)簽
換行標(biāo)簽
加粗標(biāo)簽
斜體
段落標(biāo)簽
刪除線
分割線
圖像標(biāo)簽,title:鼠標(biāo)懸停顯示的文字,
alt:圖像加載不成功時顯示的內(nèi)容
----------------------------------
_blank:新窗口打開
_self:當(dāng)前窗口打開
-- --------------- --
本頁內(nèi)從甲跳到乙
--------------------------------------------------------
功能性鏈接
--------------------------------------------------------
行內(nèi)元素:內(nèi)容撐開寬度，可以排在一行 a 、strong、em… 塊元素:獨占一行 p、h1-h6… 注：文本/塊級居中問題見本人博客： html5文本/塊級居中問題_html5 塊居中-CSDN博客
1.4注釋
1.5特殊符號
特殊符號字符實體示例空格 ?大于號 >>小于號 <<引號 “”"版權(quán)符號@©
1.6路徑
內(nèi)部路徑
外部路徑 需要帶http或者h(yuǎn)ttps
第二章 列表、表格、媒體元素
2.1列表
- 張三
- 李四
- 水果
- 香蕉
無序列表
- 老李
- 老王
2.2表格
| 表頭/第一行 |
|---|
| 數(shù)據(jù)內(nèi)容 |
h5表格
thead (tr… th)
tbody (tr…td)
tfoot (tr…td)
2.3視頻播放器
controls:播放組件
muted autoplay:自動播放
loop:循環(huán)播放
2.4html 結(jié)構(gòu)元素
2.5 iframe 內(nèi)聯(lián)框架
點擊a標(biāo)簽 將a標(biāo)簽的地址傳到iframe里的src中
iframe:實現(xiàn)頁面間跳轉(zhuǎn)
src="" width="800" height="200" name="a" frameborder="0" scrolling="auto" > 補充三個標(biāo)簽：原模原樣輸出
第三章 表單
3.1表單元素
3.1.1表單格式
格式：
3.1.2表格元素格式
屬性說明type指定元素的類型，text /password/checkbox/radio/submit/reset/file/hiddle/image/button 默認(rèn)為textname指定表單的元素名稱value元素的初始值，type為radio時必須指定一個值size指定表單元素的初始寬度。當(dāng)type 為text或者password時表單元素大小以字符為單位，其他類型時寬度以像素為單位maxlenghttype為text/passward時輸入的最大字符數(shù)checkedtype為radio/checkbox時，指定按鈕是否被選中
3.1.3元素屬性
maxlength:最大長度 minlength:最小長度 size:大小
------------------------------------------------------------
maxlength:最大長度 minlength:最小長度 size:大小
------------------------------------------------------------
radio:單選按鈕，name屬性一組要一致，checked:默認(rèn)選中
------------------------------------------------------------
checkbox:復(fù)選框 ，name組屬性要一致，checked:默認(rèn)選中
籃球
足球
----------------------------------------------------------
reset:重置按鈕，value:改變按鈕文字
按鈕1
----------------------------------------------------------
submit:提交，value：改變按鈕文字
-----------------------------------------------------------
image:圖片按鈕，src：圖片路徑
----------------------------------------------------------
button：普通按鈕。value:改變按鈕文字
------------------------------------------------------------
file:文件域，需要在form中添加 enctype="multipart/form-data"
------------------------------------------------------------
email:郵箱
---------------------------------------------------------
url:網(wǎng)址,會自動驗證URL地址格式是否正確
-----------------------------------------------------------
number:數(shù)字，maxz:最大值，min:最小值 value:默認(rèn)值 step:步長
-----------------------------------------------------------
range:滑塊， max:最大值 min:最小值 value:默認(rèn)值 step:步長
-----------------------------------------------------------
search:搜索框
----------------------------------------------------------
hidden:隱藏域
---------------------------------------------------------
readonly:只讀
---------------------------------------------------------
disabled:禁用
3.1.4元素標(biāo)注
label:標(biāo)簽 在標(biāo)簽中使用for屬性，for的屬性值要與表單中的id屬性值一致
3.1.5 表單初級驗證
placeholder:文本框輸入內(nèi)容提示
required:必填項
pattern:驗證規(guī)則，正則表達(dá)式
placeholder:文本框輸入內(nèi)容提示
------------------------------------------------------------
required:必填項
------------------------------------------------------------
pattern:驗證規(guī)則，正則表達(dá)式
第四章 初始css
4.1 選擇器
選擇器：選中標(biāo)簽（容器） 屬性 ：美化的樣子（樣式）
格式：
標(biāo)簽名{
屬性：屬性值;
...
};
// 標(biāo)簽選擇去
h1 {
font-size:12px;
color:#F00;
}
4.2 css引入方式
優(yōu)先級：就近原則
4.2.1 行內(nèi)式
在html標(biāo)簽中添加style屬性
style屬性的應(yīng)用
4.2.2 內(nèi)嵌式
在html中添加style標(biāo)簽
4.2.3 外部樣式
需要先創(chuàng)建.css文件
鏈接式 ：在html中使用link標(biāo)簽
導(dǎo)入式：在內(nèi)部寫@import
4.3 選擇器
4.3.1基本選擇器
全局選擇器：使用*號
標(biāo)簽選擇器：使用html標(biāo)簽
類選擇器:html中使用class屬性，css中使用 . 操作符
ID 選擇器：html中使用id屬性，css中使用# 操作符
交集選擇器 并集選擇器 優(yōu)先級：ID選擇器> 類選擇器> 標(biāo)簽選擇器>全局選擇器
4.3.2 層次選擇器
選擇器類型功能描述E F后代選擇器選擇匹配的F元素，且匹配的F元素被包含在匹配的E元素內(nèi)E F子代選擇器選擇匹配的F元素，且匹配的F元素是匹配的E元素的子元素E+F相鄰兄弟選擇器選擇匹配的F元素，且匹配的F元素緊位于匹配的E元素后面E~F通用兄弟選擇器選擇匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
4.3.3 屬性選擇器
屬性選擇器功能描述E[attr]選擇匹配具有屬性attr的E元素E[attr=val]選擇匹配具有屬性attr的E元素,并且屬性值為val（其中val區(qū)分大小寫）E[attr^=val]選擇匹配元素E，且E元素定義了屬性attr，其屬性值是以val開頭的任意字符串E[attr$=val]選擇匹配元素E，且E元素定義了屬性attr，其屬性值是以val結(jié)尾的任意字符串E[attr*=val]選擇匹配元素E，且E元素定義了屬性attr，其屬性值包含了“val”，換句話說，字符串val與屬性值中的任意位置相匹配
用例：
-----------------------------------------------------------
-----------------------------------------------------------
-------------------------------------------------------
-----------------------------------------------------
第五章 CSS美化
5.1 字體樣式
能讓某幾個文字或者某個詞語凸顯出來
屬性名含義舉例font在一個聲明中設(shè)置所有字體屬性font:italic :bold 36px “宋體”;font-family設(shè)置字體類型font-family:“隸書”;font-size設(shè)置字體大小font-size:12px;font-style設(shè)置字體風(fēng)格font-style:italic;font-weight設(shè)置字體的粗細(xì)font-weight:bold;
5.1.1 font-family字體類型
font-family
p{
font-family:Verdana,"楷體";
}
body{font-family: Times,"Times New Roman", "楷體";}
5.1.2 font-size字體大小
font-size屬性
px（像素）
em、rem、cm、mm、pt、pc
/* em 父親元素字體大小*em
如：父親元素字體大小為10px,子元素字體大小為2em
則2em相當(dāng)于20px(10*2em)
rem 根(html)元素字體大小*rem */
h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:2em;}
span{font-size:12pt;}
strong{font-size:13pc;}
5.1.3 font-style字體風(fēng)格
font-style屬性
值描述italic瀏覽器會顯示一個斜體的字體樣式。oblique瀏覽器會顯示一個傾斜的字體樣式。inherit規(guī)定應(yīng)該從父元素繼承字體樣式normal默認(rèn)值。瀏覽器顯示一個標(biāo)準(zhǔn)的字體樣式。
5.1.4 font-weight字體粗細(xì)
font-weight屬性
值描述normal默認(rèn)值。定義標(biāo)準(zhǔn)的字符。bold定義粗體字符。bolder定義更粗的字符。lighter定義更細(xì)的字符100、200、300、400、500、600、700、800、900定義由細(xì)到粗的字體，400等同于normal，700等同于bold
5.1.5 font屬性
字體屬性的順序：字體風(fēng)格→字體粗細(xì)→字體大小→字體類型
p span{
font:oblique bold 12px "楷體";
}
5.2 文本屬性
屬性含義舉例color設(shè)置文本顏色color:#00C;text-align設(shè)置元素水平對齊方式text-align:right/center/left/justify;text-indent設(shè)置首行文本的縮進(jìn)text-indent:20px;line-height設(shè)置文本的行高line-height:25px;text-decoration設(shè)置文本的裝飾text-decoration:underline;direction設(shè)置文本/書寫方向。direction: rtl;文本方向從右到左word-spacing設(shè)置字間距
5.2.1 text-align:屬性值如下
值說明left把文本排列到左邊。默認(rèn)值：由瀏覽器決定right把文本排列到右邊center把文本排列到中間justify實現(xiàn)兩端對齊文本效果
當(dāng)line-heigh和容器height一致時候，可以實現(xiàn)垂直居中
5.2.2 text-decoration:屬性值如下
div{
/* underline:文本下劃線
overline:文本上劃線
line-through:文本刪除線 */
text-decoration: underline;
}
vertical-align:圖片文字對齊方式
屬性：middle、top、bottom
5.2.3 text-shadow文本陰影
text-shadow : color x-offset y-offset blur-radius;
span{
text-shadow: #0000FF 1px 1px 2px;
}
5.3 color屬性
RGB：
十六進(jìn)制方法表示顏色：前兩位表示紅色分量，中間兩位表示綠色分量，最后兩位表示藍(lán)色分量rgb(r,g,b) : 正整數(shù)的取值為0～255
RGBA
在RGB基礎(chǔ)上增加了控制alpha透明度的參數(shù)，其中這個透明通道值為0～1
color:#A983D8;
color:#EEFF66;
color:rgb(0,255,255);
/* 0.5表示透明程度 */
color:rgba(0,0,255,0.5);
5.4 超鏈接樣式
偽類名稱含義示例a:link未單擊訪問時超鏈接樣式a:link{color:#9ef5f9;}a:visited單擊訪問后超鏈接樣式a:visited {color:#333;}a:hover鼠標(biāo)懸浮其上的超鏈接樣式a:hover{color:#ff7300;}a:active鼠標(biāo)單擊未釋放的超鏈接樣式a:active {color:#999;}
5.5 list-style-type列表樣式
list-style-type:none/disc/circle/square/decimallist-style-image:
值說明語法示例none無標(biāo)記符號list-style-type:none;disc實心圓，默認(rèn)類型list-style-type:disc;circle空心圓list-style-type:circle;square實心正方形list-style-type:square;decimal數(shù)字list-style-type:decimal
5.6 background-color背景顏色
5.7 background-img背景圖像
background-image:url(圖片路徑);
5.7.1 背景重復(fù)方式
background-repeat屬性
屬性值說明repeat沿水平和垂直兩個方向平鋪no-repeat：不平鋪，即只顯示一次repeat-x只沿水平方向平鋪repeat-y只沿垂直方向平鋪
5.8 background-position背景定位
值含義Xpos Ypos單位：px，Xpos表示水平位置，Ypos表示垂直位置X% Y%使用百分比表示背景的位置X、Y方向關(guān)鍵詞水平方向的關(guān)鍵詞：left、center、right垂直方向的關(guān)鍵詞：top、*center、bottom
5.9 背景屬性簡寫
background:url(../image/arrow-down.gif) 20px 10px no-repeat;
5.10 background-size背景尺寸
屬性值描述auto默認(rèn)值，使用背景圖片保持原樣percentage當(dāng)使用百分值時，不是相對于背景的尺寸大小來計算的，而是相對于元素寬度來計算的cover整個背景圖片放大填充了整個元素contain讓背景圖片保持本身的寬高比例，將背景圖片縮放到寬度或者高度正好適應(yīng)所定義背景的區(qū)域
5.11 linear-gradient漸變
線性漸變：顏色沿著一條直線過渡：從左到右、從右到左、從上到下等,默認(rèn)情況下是從上到下
div{
/*兼容Webkit內(nèi)核的瀏覽器*/
-webkit-linear-gradient ( position, color1, color2,…)
/* 從上到下漸變 */
background: linear-gradient(blue, pink);
/* 指定為從右到左漸變 */
background: linear-gradient(to right, blue, pink);
/* 多種顏色漸變 */
background: linear-gradient(red, yellow, blue, orange);
/* 從 10%的位置開始漸變*/
background: linear-gradient(blue, 10%, pink);
}
徑向漸變：圓形或橢圓形漸變，顏色不再沿著一條直線變化，而是從一個起點朝所有方向混合
第六章 盒子模型
6.1 border邊框
屬性說明示例border-top-color上邊框顏色border-top-color:#369;border-right-color右邊框顏色border-right-color:#369;border-bottom-color下邊框顏色border-bottom-color:#fae45b;border-left-color左邊框顏色border-left-color:#efcd56;border-color四個邊框為同一顏色border-color:#eeff34;上、下邊框顏色：#369左、右邊框顏色*：*#000border-color:#369 #000;上邊框顏色：#369左、右邊框顏色：#000下邊框顏色：#f00border-color:#369 #000 #f00;上、右、下、左邊框顏色：#369、#000、#f00、#00fborder-color:#369 #000 #f00 #00f;
6.2 border-width粗細(xì)
thin/ medium /thick /像素值
div{
border-top-width:5px;
border-right-width:10px;
border-bottom-width:8px;
border-left-width:22px;
border-width:5px ;
border-width:20px 2px;
border-width:5px 1px 6px;
border-width:1px 3px 5px 2px;
}
6.3 border-style邊框樣式
dotted: 定義一個點線邊框
dashed: 定義一個虛線邊框
solid: 定義實線邊框
double: 定義兩個邊框。 兩個邊框的寬度和 border-width 的值相同
div{
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-style:solid ;
border-style:solid dotted;
border-style:solid dotted dashed;
border-style:solid dotted dashed double;
}
6.4 border簡寫
div{
border:1px solid #3a6587;
border: 1px dashed red;
}
6.5 margin外邊距
網(wǎng)頁居中的必要條件：
塊元素固定寬度
margin{0px,auto} /* 設(shè)置居中; */
div{
margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :3px 5px 7px;
margin :8px;
}
6.6 padding內(nèi)邊距
div{
padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;
}
6.7 盒子模型尺寸
盒子模型總尺寸=border+padding+margin+內(nèi)容寬度
6.8 box-sizing
box-sizing：消除 padding和border邊框把盒子撐大的效果，即盒子的大小不變，其設(shè)置的邊距會往里縮。
div{
box-sizing： border-box ;
/* content-box:默認(rèn)值，盒子的總尺度
border-box:盒子的寬度或高度等于元素內(nèi)容的寬度或高度
inherit:元素繼承父元素的盒子模型模式
*/
box-sizing：content-box | border-box | inherit;
}
6.9 border-radius圓角邊框
div{
border-radius: 20px 10px 50px 30px;/*順時針*/
}
6.9.1 制作圓形
border-radius屬性制作圓形的兩個要點：
元素的寬度和高度必須相同 圓角的半徑為元素寬度的一半，或者直接設(shè)置圓角半徑值為50%
div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}
另：span變圓：用padding撐開 span{
padding: 0 6px;
background-color: pink;
color: white;
border-radius: 50%;
}
6.9.2 半圓
border-radius屬性制作半圓形的兩個要點
制作上半圓或下半圓時，元素的寬度是高度的2倍，而且圓角半徑為元素的高度值制作左半圓或右半圓時，元素的高度是寬度的2倍，而且圓角半徑為元素的寬度值
/* 右半圓 */
.div_one{
width: 50px;
height: 100px;
border-radius: 0 50px 50px 0;
}
/* 左半圓 */
.div_two{
width: 50px;
height: 100px;
border-radius:50px 0 0 50px ;
}
6.9.3 四分之一圓
利用border-radius屬性制作扇形遵循“三同，一不同”原則
三同”是元素寬度、高度、圓角半徑相同一不同”是圓角取值位置不同
/* 左上四分之一 */
.div_six{
width: 50px;
height: 50px;
border-radius: 50px 0 0 0;
}
/* 右下四分之一圓 */
.right_boo{
width: 50px;
height: 50px;
border-radius: 0 0 50px 0 ;
}
6.10 box-shadow盒子陰影
box-shadow:inset x-offset y-offset blur-radius color;
inset：陰影類型內(nèi)陰影/從外層的陰影（開始時）改變陰影內(nèi)側(cè)陰影s
x-offset :X軸位移，指定陰影水平位移量
blur-radius:半徑
color:顏色
/* x 偏移量 | y 偏移量 | 陰影顏色 */
box-shadow: 60px -16px teal;
/* x 偏移量 | y 偏移量 | 陰影模糊半徑 | 陰影顏色 */
box-shadow: 10px 5px 5px black;
第七章 浮動
7.1 display
值說明block塊級元素的默認(rèn)值，元素會被顯示為塊級元素，該元素前后會帶有換行符inline內(nèi)聯(lián)元素的默認(rèn)值。元素會被顯示為內(nèi)聯(lián)元素，該元素前后沒有換行符inline-block行內(nèi)塊元素，元素既具有內(nèi)聯(lián)元素的特性，也具有塊元素的特性none設(shè)置元素不會被顯示
7.2 float屬性/浮動
可以設(shè)置塊級元素排列在一行
值說明left在左側(cè)不允許浮動元素right在右側(cè)不允許浮動元素both在左、右兩側(cè)不允許浮動元素none默認(rèn)值。允許浮動元素出現(xiàn)在兩側(cè)
div{
float:left;/*左浮動*/
float:right;/*右浮動*/
}
7.3 解決邊框塌陷問題
給父容器后面添加空的div,并設(shè)置為
設(shè)置父容器高度：比如hight:400px; 給父容器添加overflow: hidden; 給父容器添加偽類:after,并設(shè)置為 fatherdiv:after{
display: block;
content: "";
clear: both;
}
解決塌陷案例：
第八章 定位
8.1 position屬性
? static:默認(rèn)值,沒有定位 ? relative:相對頂定位 ? absolute:絕對定位 ? fixed:固定定位 偏移設(shè)置：top left right bottom relative :相對定位，相對于自身原來的位置進(jìn)行移動 特點：任然在標(biāo)準(zhǔn)文檔流中，原來的位置會被保留 absolute：絕對定位，以瀏覽器窗口進(jìn)行定位移動 特點：脫離標(biāo)準(zhǔn)文檔流，原來的位置會被占用 fixed: 固定定位，固定到瀏覽器窗口的某個位置 特點：脫離標(biāo)準(zhǔn)文檔流 sticky：吸頂定位，滾動條到頂定位
?
8.2 z-index屬性
調(diào)整元素定位時重疊層的上下位置 此屬性需要在設(shè)置position的情況才能使用
第九章 動畫
9.1 transform動畫
transform 2D變形
translate()：平移函數(shù)，基于X、Y坐標(biāo)重新定位元素的位置
scale()：縮放函數(shù)，可以使任意元素對象尺寸發(fā)生變化
rotate()：旋轉(zhuǎn)函數(shù)，取值是一個度數(shù)值
skew()：傾斜函數(shù)，取值是一個度數(shù)值
div{
transform:translate(100px,100px);
transform:translate(100px,100px) scale(1.5)
}
rotate( )函數(shù)只是旋轉(zhuǎn)，而不會改變元素的形狀
skew( )函數(shù)是傾斜，元素不會旋轉(zhuǎn)，會改變元素的形狀
9.2 transition過渡動畫
transition: 要過度的屬性 時間 過度函數(shù) 延遲時間；
transition: 要過度的屬性 時間 過度函數(shù) 延遲時間；
要過的屬性：可以使用 all 或者一個一個的寫
時間： 單位s秒 ms毫秒
過度函數(shù)：
ease：速度由快到慢（默認(rèn)值）
linear：速度恒速（勻速運動）
ease-in：速度越來越快（漸顯效果）
ease-out：速度越來越慢（漸隱效果）
ease-in-out：速度先加速再減速（漸顯漸隱效果）
9.3 定義動畫
/* 定義動畫*/
@keyframes imgacion{
0%{
transform: rotate(0deg) scale(1);
}
100%{
transform: rotate(360deg) scale(1.2);
}
}
/* 使用動畫*/
img:hover{
animation-name: imgacion;
animation-duration: 2s;
}
}
十、附屬
*{/* 清除所有標(biāo)簽內(nèi)外邊距 */
padding: 0;
margin: 0;
}
input{/* 清除輸入框默認(rèn)ya */
outline:none;
}
y; top: 100px; }
456
123
789
```
?
8.2 z-index屬性
調(diào)整元素定位時重疊層的上下位置 此屬性需要在設(shè)置position的情況才能使用
第九章 動畫
9.1 transform動畫
transform 2D變形
translate()：平移函數(shù)，基于X、Y坐標(biāo)重新定位元素的位置
scale()：縮放函數(shù)，可以使任意元素對象尺寸發(fā)生變化
rotate()：旋轉(zhuǎn)函數(shù)，取值是一個度數(shù)值
skew()：傾斜函數(shù)，取值是一個度數(shù)值
div{
transform:translate(100px,100px);
transform:translate(100px,100px) scale(1.5)
}
rotate( )函數(shù)只是旋轉(zhuǎn)，而不會改變元素的形狀
skew( )函數(shù)是傾斜，元素不會旋轉(zhuǎn)，會改變元素的形狀
9.2 transition過渡動畫
transition: 要過度的屬性 時間 過度函數(shù) 延遲時間；
transition: 要過度的屬性 時間 過度函數(shù) 延遲時間；
要過的屬性：可以使用 all 或者一個一個的寫
時間： 單位s秒 ms毫秒
過度函數(shù)：
ease：速度由快到慢（默認(rèn)值）
linear：速度恒速（勻速運動）
ease-in：速度越來越快（漸顯效果）
ease-out：速度越來越慢（漸隱效果）
ease-in-out：速度先加速再減速（漸顯漸隱效果）
9.3 定義動畫
/* 定義動畫*/
@keyframes imgacion{
0%{
transform: rotate(0deg) scale(1);
}
100%{
transform: rotate(360deg) scale(1.2);
}
}
/* 使用動畫*/
img:hover{
animation-name: imgacion;
animation-duration: 2s;
}
}
十、附屬
*{/* 清除所有標(biāo)簽內(nèi)外邊距 */
padding: 0;
margin: 0;
}
input{/* 清除輸入框默認(rèn)ya */
outline:none;
}
柚子快報邀請碼778899分享：HTML5-css3筆記
文章來源
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Chewy寵物好物棧
