css3去相容不同的瀏覽器,針對舊的瀏覽器做相容
新瀏覽器基本不需要新增字首。
98%的**就按正常標準寫就可以了
2%需要相容性處理
transition是以下四個屬性的復合寫法格式:
transition-property : 規定設定過渡效果的css屬性的名稱。
transition-duration : 規定完成過渡效果需要多少秒或毫秒。
transition-delay : 定義過渡效果何時開始。 ( 延遲(數值為正數),也可以提前(數值為負數) )
transition-timing-function : 規定速度效果的速度曲線。
注:不要加到hover上。
應用例項
animation-name : 設定動畫的名字 (自定義的)
animation-duration : 動畫的持續時間
animation-delay : 動畫的延遲時間
animation-iteration-count : 動畫的重複次數 ,預設值就是1 ,infinite無限次數
animation-timing-function : 動畫的運動形式
注: 1. 運動結束後,預設情況下會停留在起始位置。
2. @keyframes : from -> 0% , to -> 100%
none (預設值) : 在運動結束之後回到初始位置,在延遲的情況下,讓0%在延遲後生效
backwards : 在延遲的情況下,讓0%在延遲前生效
forwards : 在運動結束的之後,停到結束位置
both : backwards和forwards同時生效
alternate : 一次正向(0%~100%),一次反向(100%~0%)
reverse : 永遠都是反向 , 從100%~0%
normal (預設值) : 永遠都是正向 , 從0%~100%
一款強大的預設css3動畫庫。
基本使用:
animated : 基類(基礎的樣式,每個動畫效果都需要加)
infinite : 動畫的無限次數
transform:
rotatex() : 正值向上翻轉
rotatey() : 正值向右翻轉
translatez() : 正值向前,負值向後
scalez() : 立體元素的厚度
3d寫法
scale3d() : 三個值 x y z
translate3d() : 三個值 x y z
rotate3d() : 四個值 0|1(x軸是否新增旋轉角度) 0|1(y軸是否新增旋轉角度) 0|1(z軸是否新增旋轉角度) deg
perspective(景深): 離螢幕多遠的距離去觀察元素,值越大幅度越小。
perspective-origin : 景深-基點位置,觀察元素的角度。
transform-origin: center center -50px; (z軸只能加粗樣式寫數值,不能寫單詞)
transform-style : 3d空間
flat (預設值2d)、preserve-3d (3d,產生乙個三維空間)
backface-visibility : 背面隱藏
hidden、visible (預設值)
background-size : 背景圖的尺寸大小
cover : 覆蓋
contain : 包含
background-origin : 背景圖的填充位置
padding-box (預設)
border-box
content-box
background-clip : 背景圖的裁切方式
padding-box
border-box (預設)
content-box
注:復合樣式的時候,第乙個是位置,第二個是裁切
1. 線性漸變 -> linear-gradient是值,需要新增到background-image屬性上
注:漸變的0度是在頁面在下邊,正值會按照順時針旋轉,負值按逆時針旋轉。
2. 徑向漸變 -> radial-gradient
font-face是css3中的乙個模組,他主要是把自己定義的web字型嵌入到你的網頁中。
好處:1.可以非常方便的改變大小和顏色
font-size color
2.放大後不會失真
3.減少請求次數和提高載入速度
4.簡化網頁布局
5.減少設計師和前端工程師的工作量
6.可使用計算機沒有提供的字型
使用: @font-face語法
像.woff等檔案都是做相容平台處理的, mac、linux等。
HTML CSS學習筆記(2)
中寫入可以構成乙個無序列表,而在中寫入構成的是乙個有序列表 絕不考慮使用table,橫向布局用帶有float的div或li取代td。當然,如果要展現的就是 肯定得用table 其實asp.net的時候,基本都用table布局的 慎用ul li,當有重複單元時可使用ul li,沒有重複的單元就別用ul...
HTML CSS 學習筆記(2)
html hyper text markup language 是一種超文字標記語言。網頁所有的內容均書寫在標籤內部,標籤是組成html頁面的基本元素,因此對標籤特性的理解在html的學習過程中比較重要。一 標籤可分為 閉合標籤和空標籤 閉合標籤 指由開始標籤和結束標籤組成的一對標籤,這種標籤允許巢...
HTML CSS學習筆記
利用標籤中style屬性來改變每個標籤的顯示樣式 適用於單個標籤的樣式修改。不靈活 this is p tag 內嵌形式 可用於同類標籤的樣式統一修改 依然不夠靈活 表示後面的所有table中的文字預設顏色如我所設定。前提是已經存在乙個定義好的css檔案,網頁的一部分樣式需要用到,那麼可以採用這種方...