實用CSS3的transform實現多種動畫效果

2021-10-07 22:14:31 字數 3516 閱讀 9227

檢視效果:

以下是**:

1

doctype html public "-//w3c//dtd html 4.01 transitional//en"

>

2<

html

>

3<

head

>

4<

base

href

="">

5<

title

>實用css3的transform實現多種動畫效果-柯樂義

title

><

base

target

="_blank"

/>

6<

style

type

="text/css"

>

7.menu ul

1112

.menu ul li

1516

.menu ul li a

24.menu ul li.translate a

27.menu ul li.translate-x a

30.menu ul li.translate-y a

33.menu ul li.rotate a

36.menu ul li.scale a

39.menu ul li.scale-x a

42.menu ul li.scale-y a

45.menu ul li.skew a

48.menu ul li.skew-x a

51.menu ul li.skew-y a

54.menu ul li.matrix a

5758

/*x-軸偏移

*/59

.menu ul li.translate-x a:hover

6667

/*y-軸偏移

*/68

.menu ul li.translate-y a:hover

75/*

x/y 軸都偏移

*/76

.menu ul li a:hover

8384

/*角度旋轉

*/85

.menu ul li.rotate a:hover

9293

/*縮放 縮放都是以原元素中心點為參考點的

*/94

.menu ul li.scale a:hover

101.menu ul li.scale-x a:hover

108.menu ul li.scale-y a:hover

115116

/*旋轉

*/117

.menu ul li.skew a:hover

124125

/** transform:skewx(x)

*/126

.menu ul li.skew-x a:hover

133134

/** transform:skewy(y)

*/135

.menu ul li.skew-y a:hover

142143

144.menu ul li.matrix a:hover

151style

>

152head

>

153154

<

body

>

155<

div

class

="menu"

>

156<

ul class

="clearfix"

>

157<

li class

="item translate"

><

a href

="">translate

a>

li>

158<

li class

="item translate-x"

><

a href

="/a/bjac/2fs4sdog.htm"

>translatex

a>

li>

159<

li class

="item translate-y"

><

a href

="/a/bjac/3iote6u9.htm"

>translatey

a>

li>

160<

li class

="item rotate"

><

a href

="/a/bjad/8pwhsjna.htm"

>rotate

a>

li>

161<

li class

="item scale"

><

a href

="/a/bjac/xvcdrv0w.htm"

>scale

a>

li>

162<

li class

="item scale-x"

><

a href

="/a/bjad/7svi1lby.htm"

>scalex

a>

li>

163<

li class

="item scale-y"

><

a href

="/a/bjac/fsjrtc0j.htm"

>scaley

a>

li>

164<

li class

="item skew"

><

a href

="/a/bjad/mroxdkos.htm"

>skew

a>

li>

165<

li class

="item skew-x"

><

a href

="/a/bjac/kwxcvl59.htm"

>skewx

a>

li>

166<

li class

="item skew-y"

><

a href

="/a/bjac/3pipmkmg.htm"

>skewy

a>

li>

167<

li class

="item matrix"

><

a href

="/a/bjac/eu7eaagg.htm"

>matrix

a>

li>

168ul

>

169div

>

170body

>

171html

>

web前端:

CSS3實用方法總結 推薦

1.圓角邊框 css code複製內容到剪貼簿 2.box陰影 css code複製內容到剪貼簿 3.背景大小 css code複製內容到剪貼簿 4.背景位置 css code複製內容到剪貼簿 5.文字陰影 css code複製內容到剪貼簿 6.強制自動換行 css code複製內容到剪貼簿 7.分...

實用的css3樣式

1.word wrap word wrap normal break word 只在允許的斷字點換行 瀏覽器保持預設處理 斷字 在長單詞或url位址內部進行換行。2.font face internet explorer 9 firefox,chrome,safari,和 opera 支援 woff...

實用CSS3的transform實現多種動畫效果

檢視效果 以下是 1 doctype html public w3c dtd html 4.01 transitional en 2 html 3 head 4 base href 5 title 實用css3的transform實現多種動畫效果 柯樂義 title base target blan...