1.css3動畫屬性分析(2016-5-11)
1.transition: 規定屬性變換規則，可以這樣講。transition(a,b,c,d);
a:要變換的屬性；
b:過渡時間；
c:運動方式；
d：需要延遲多久開始執行該動畫
ex：測試div
.exdiv
div:hover;
該例項說明黨滑鼠移入div時，延遲2s後該div寬度會2s內變為500px;
2.transform:我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。
改屬性2d變換有以下屬性
translate(x,y):對元素進行位移；
ex：測試div
.exdiv表示div從當前位置left移動50px,top移動100px;
rotate(x)：對元素進行角度旋轉
.exdiv標書div順時針旋轉50個角度
scale(x,y)：對元素進行角度旋轉
.exdiv表示div寬度增加到原始尺寸的2倍，高度增加到原始尺寸的4倍
skew(x,y) 方法，元素翻轉給定的角度，根據給定的水平線（x 軸）和垂直線（y 軸）引數：
.exdiv 圍繞 x 軸把元素翻轉 30 度，圍繞 y 軸翻轉 20 度。
html5動畫效果示例：
1.tab切換
<style
>
/**css3選項卡*
*/.tab-main
.tab-main input
.tab-main .content
.tab-main > .ys
#tab-1+.ys
#tab-2+.ys
#tab-3+.ys
.tab-main > input:checked+.ys
.tab-main > .content section
#tab-1:checked~.content #tab-item-1
#tab-2:checked~.content #tab-item-2
#tab-3:checked~.content #tab-item-3
style
>
<
div
class
="tab-main"
>
<
input
type
="radio"
id="tab-1"
name
="tab"
checked
>
<
span
href
="#tab-item-1"
class
="ys"
>首頁
span
>
<
input
type
="radio"
id="tab-2"
name
="tab"
>
<
span
href
="#tab-item-2"
class
="ys"
>分頁1
span
>
<
input
type
="radio"
id="tab-3"
name
="tab"
>
<
span
href
="#tab-item-3"
class
="ys"
>分頁2
span
>
<
div
class
="line ease"
>
div>
<
div
class
="content"
>
<
section
id="tab-item-1"
><
div>首頁 介紹
div>
section
>
<
section
id="tab-item-2"
><
div>分頁1介紹
div>
section
>
<
section
id="tab-item-3"
><
div>分頁2介紹
div>
section
>
div>
div>
css3動畫例項
在 css3 中建立動畫，需要學習 keyframes 規則。keyframes 規則用於建立動畫。在 keyframes 中規定某項 css 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。keyframes是定義動畫的 定義動畫的樣式 例 keyframes animatname 此動畫的名稱...
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...
CSS基礎 CSS3動畫
通過css3動畫屬性，我們可以建立動畫，實現簡單的動畫效果。css3動畫的實現需要用到animation屬性並配合關鍵幀 keyframes 使用。1.對需要設定動畫的元素新增animation屬性。2.設定關鍵幀 keyframes animation是所有動畫屬性的簡寫屬性，除了 animati...