一、css3轉換
1、元素的2d轉換
1transform:none;/*不進行轉換*/
2transform:translate(x,y);/*定義2dd轉換,移動*/
3transform:translate3d(x,y,z);/*定義3d轉換*/
4transform:tranlatex(value);/*使用x軸的值轉換*/
5transform:tranlatey(value);/*使用y軸的值轉換*/
6transform:scale(value);/*2d縮放*/
7transform:scale3d(value1,value2,value3);/*3d縮放*/
8transform:skew(x-angle,y-angle);/*沿著 x 和 y 軸的 2d 傾斜轉換*/
9transform:rotate(angle);/* 2d 旋轉,在引數中規定角度*/
10transform:rotatex(angle); /*沿著 x 軸的 3d 旋轉*/
11transform:rotatey(angle); /*沿著 y 軸的 3d 旋轉*/
12 transform:rotatez(angle); /*沿著 z 軸的 3d 旋轉*/
2、元素的過渡效果
(1)transition-property 指定css屬性的name,transition效果
(2)transition-duration 需要指定多少秒或毫秒才能完成
(3)transition-timing-function 轉速曲線
其值有:linear(勻速)、ease(先慢後快)、ease-in(以慢速開始)、ease-out(以慢速結束)、ease-in-out(以慢速開始和結束)
(4)transition-delay 定義transition效果開始的時候
3、案例:(翻轉導航欄)
1doctype html
>
2<
html
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>
title
>
6<
style
type
="text/css"
>
7ul>li
18ul>li:hover
24.box1,.box2
29.box1
33.box2
37style
>
38head
>
39<
body
>
40<
ul>
41<
li>
42<
div
class
="box1"
>1
div>
43<
div
class
="box2"
>首頁
div>
44li
>
45<
li>
46<
div
class
="box1"
>2
div>
47<
div
class
="box2"
>首頁
div>
48li
>
49<
li>
50<
div
class
="box1"
>3
div>
51<
div
class
="box2"
>首頁
div>
52li
>
53<
li>
54<
div
class
="box1"
>4
div>
55<
div
class
="box2"
>首頁
div>
56li
>
57<
li>
58<
div
class
="box1"
>5
div>
59<
div
class
="box2"
>首頁
div>
60li
>
6162
ul>
63body
>
64html
>
二、動畫
1、
1@keyframes animationname
3to{}
4 }
2、屬性
animation 所有動畫屬性的簡寫屬性
1animation-name;/*指定要繫結到選擇器的關鍵幀的名稱*/
2animation-duration;/*設定動畫將如何完成乙個週期*/
3animation-delay/*設定動畫在啟動前的延遲間隔*/45
67時),要應用到元素的樣式*/
8 animation-play-state/*指定動畫是否正在執行或已暫停*/
3、案例:(相簿)
1doctype html
>
2<
html
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>
title
>
6<
style
type
="text/css"
>
7body
10.box
19.box:hover
22.box1
32@keyframes rotate
36to39}
40.box>.box1:nth-child(1)
43.box>.box1:nth-child(2)
46.box>.box1:nth-child(3)
49.box>.box1:nth-child(4)
52.box>.box1:nth-child(5)
55.box>.box1:nth-child(6)
5859
style
>
60head
>
61<
body
>
62<
div
class
="box"
>
63<
div
class
="box1"
>
div>
64<
div
class
="box1"
>
div>
65<
div
class
="box1"
>
div>
66<
div
class
="box1"
>
div>
67<
div
class
="box1"
>
div>
68<
div
class
="box1"
>
div>
69div
>
70body
>
71html
>
css3動畫方塊旋轉
html translate x,y 基於原來的位置,沿x軸平移,長度為x,沿2軸平移,長度為ytransform translate x,y translatex x 基於原來的位置,沿x軸平移,長度為xtransform translatex x translatey y 基於原來的位置,沿y軸...
CSS3動畫 3D旋轉
學了c3之後,簡單做了乙個3d旋轉的小demo.個人親猜測相容chrome firefox opera safari,沒有考慮ie。如果下面 有問題,可以在我的github檢視源 可以檢視網頁效果demo位址。如下 ccs3animation 3drotatetitle charset utf 8 ...
CSS3旋轉和動畫例子
1.css3旋轉的例子 2.css3動畫 部分最關鍵的就是 webkit transition all 0.5s ease in 目前而言,transition僅webkit核心的瀏覽器支援,所以此效果僅在chrome或是safari下有。transiton屬性有這幾個值 transition pr...