HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版） 課件 第11章 CSS3特效和動畫_第1頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版） 課件 第11章 CSS3特效和動畫_第2頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版） 課件 第11章 CSS3特效和動畫_第3頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版） 課件 第11章 CSS3特效和動畫_第4頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版） 課件 第11章 CSS3特效和動畫_第5頁
已閱讀5頁，還剩25頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

第11章CSS3特效和動畫11.1圓角

11.2透明度

11.3背景

11.4漸變

11.52D和3D轉(zhuǎn)換

11.6過渡

11.7動畫

11.8小結(jié)

11.1圓角11.1.1設(shè)置邊框?yàn)閳A角

11.1.2設(shè)置每個(gè)圓角為指定值

11.1.1設(shè)置邊框?yàn)閳A角border-radius:數(shù)值;【示例11-1】設(shè)置元素的邊框?yàn)閳A角。1

<!DOCTYPEhtml>2

<htmlxmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5

<title>設(shè)置圓角</title>6

<styletype="text/css">7

div{width:100px;height:100px;border:1px#000000solid;float:left;margin-right:10px;text-align:center;}8

#Div1{border-radius:10px;}9

#Div2{border-radius:30px;}10

#Div3{border-radius:50px;}11

#Div4{border-radius:100px;}12

</style>13

</head>14

<body>15

<divid="Div1">圓角1</div>16

<divid="Div2">圓角2</div>17

<divid="Div3">圓角3</div>18

<divid="Div4">圓角4</div>19

</body>20

</html>11.1.2設(shè)置每個(gè)圓角為指定值border-radius:數(shù)值1數(shù)值2數(shù)值3數(shù)值4;【示例11-2】分別設(shè)置元素的4個(gè)圓角。1

<!DOCTYPEhtml>2

<htmlxmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5

<title>分別設(shè)置圓角</title>6

<styletype="text/css">7

div{width:100px;height:100px;border:1px#000000solid;float:left;margin-

right:10px;text-align:center;}8

#Div1{border-radius:10px20px30px40px;}9

#Div2{border-radius:10px20px30px;}10

#Div3{border-radius:10px20px;}11

</style>12

</head>13

<body>14

<divid="Div1">圓角1</div>15

<divid="Div2">圓角2</div>16

<divid="Div3">圓角3</div>17

</body>18

</html>11.2透明度opacity:屬性值;【示例11-3】設(shè)置圖片和背景的透明度。1

<!DOCTYPEhtml>2

<htmlxmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5

<title>透明度</title>6

<styletype="text/css">7

#Div1{float:left;margin-right:10px;}8

img{width:400px;height:300px;opacity:0.5;}9

img:hover{opacity:1;}10

#Div2{width:500px;height:300px;text-align:center;font-size:36px;border:1pxredsolid;background:url(map.gif);float:left;}11

#Div3{width:400px;height:200px;border:1pxredsolid;margin-top:50px;margin-left:50px;background:#FFF;opacity:0.5;}12

#Div4{line-height:200px;position:relative;top:-200px;}13

</style>14

</head>15

<body>16

<divid="Div1">17

<imgsrc="pic03-10.jpg"/>18

</div>19

<divid="Div2">20

<divid="Div3"></div>21

<divid="Div4">大漠孤煙直，長河落日圓</div>22

</div>23

</body>24

</html>11.3背景（1）設(shè)置元素的背景為指定顏色background-color屬性（2）設(shè)置元素的背景為指定圖像background-image屬性（3）設(shè)置元素的背景圖像的位置background-position屬性位置值、x%y%、inherit（4）設(shè)置元素背景圖像的平鋪方式background-repeat屬性repeat、repeat-x、repeat-y、no-repeat、inherit（5）通過background屬性直接設(shè)置元素的背景顏色、背景圖像、背景位置以及背景平鋪方式，其語法格式如下。background:colorurlrepeatpostion…

;【示例11-4】設(shè)置元素的背景色和背景圖像。1

<!DOCTYPEhtml>2

<htmlxmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"

/>5

<title>設(shè)置背景</title>6

<styletype="text/css">7

div{width:300px;height:300px;float:left;border:1pxsolidblack;color:#FFF;text-align:center;line-height:300px;}8

#Div1{background-color:red;}9

#Div2{background-image:url(pic03-9.jpg);background-color:blue;background-

repeat:repeat-y;background-position:left;}10

#Div3{background:greenurl(pic02-10.jpg)repeat-x

top;}11

</style>12

</head>13

<body>14

<divid="Div1">背景色為黃色</div>15

<divid="Div2">背景為圖像</div>16

<divid="Div3">一次性設(shè)置背景的多個(gè)屬性</div>17

</body>18

</html>11.4漸變11.4.1線性漸變

11.4.2徑向漸變

11.4.1線性漸變background-image屬性的linear-gradient()函數(shù)background-image:linear-gradient(angle,color-stop1,…,

color-stopN);angle屬性可以設(shè)置的角度值如圖11.6所示?！臼纠?1-5】實(shí)現(xiàn)多種線性漸變效果。1

<!DOCTYPEhtml>2

<htmlxmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5

<title>線性漸變</title>6

<styletype="text/css">7

div{border:1px

solidblack;width:200px;height:100px;float:left;text-align:

center;line-height:100px;}8

#Div1{background-image:linear-gradient(red,yellow);}9

#Div2{background-image:linear-gradient(red,orange,yellow,green,cyan,blue,

violet);}10

#Div3{background-image:linear-gradient(tobottomright,red,yellow,blue);}11

#Div4{background-image:linear-gradient(30deg,red,yellow,blue);}12

#Div5{background-image:linear-gradient(toright,red50%,yellow,blue);}13

</style>14

</head>15

<body>16

<divid="Div1">兩色默認(rèn)方向</div>17

<divid="Div2">多色默認(rèn)方向</div>18

<divid="Div3">多色關(guān)鍵字指定方向</div>19

<divid="Div4">多色角度值指定方向</div>20

<divid="Div5">多色百分比指定顏色占比</div>21

</body>22

</html>11.4.2徑向漸變要實(shí)現(xiàn)徑向漸變時(shí)需要使用到background-image屬性的radial-gradient()屬性，其語法格式如下。background-image:radial-gradient(shapesizeatposition,start-color,…,last-color);shape：ellipse、circle。size：farthest-corner、closest-side、closest-corner、farthest-sideatposition位置坐標(biāo)原點(diǎn)為元素中心（centercenter），如圖所示。使用以px為單位的數(shù)字定位時(shí)，位置坐標(biāo)的原點(diǎn)位置（0px,0px）位于元素的左上角，如圖所示?！臼纠?1-6】實(shí)現(xiàn)多種徑向漸變效果。1

<!DOCTYPEhtml>2

<htmlxmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5

<title>徑向漸變</title>6

<styletype="text/css">7

div{

width:150px;height:100px;border:1pxsolidblack;float:left;text-

align:center;line-height:100px;}8

#Div1{background-image:radial-gradient(red,yellow,blue,green);}9

#Div2{background-image:radial-gradient(circle,red,yellow,blue,green);}10

#Div3{background-image:radial-gradient(circleclosest-side,red,yellow,blue,

green);}11

#Div4{background-image:radial-gradient(circleatright,red,yellow,blue,green);}12

#Div5{background-image:radial-gradient(circleat0px50px,red,yellow,blue,

green);}13

</style>14

</head>15

<body>16

<divid="Div1">兩色橢圓漸變</div>17

<divid="Div2">圓形漸變</div>18

<divid="Div3">漸變到最近的邊</div>19

<divid="Div4">數(shù)字坐標(biāo)中心偏右</div>20

<divid="Div5">關(guān)鍵字中心偏左</div>21

</body>22

</html>11.5

2D和3D轉(zhuǎn)換11.5.12D轉(zhuǎn)換

11.5.23D轉(zhuǎn)換

為了兼容多種瀏覽器語法格式如下。transform:函數(shù)1(參數(shù))…函數(shù)n(參數(shù));

/*標(biāo)準(zhǔn)寫法*/-ms-transform:函數(shù)()…函數(shù)n(參數(shù));

/*支持IE9*/-webkit-transform:函數(shù)()…函數(shù)n(參數(shù));

/*支持Safari和Chrome*/-moz-transform:函數(shù)()…函數(shù)n(參數(shù));

/*支持Firefox*/11.5.1

2D轉(zhuǎn)換translate()函數(shù)用于實(shí)現(xiàn)讓元素位移transform:translate(x軸,y軸);rotate()函數(shù)用于實(shí)現(xiàn)讓元素旋轉(zhuǎn)transform:rotate(度數(shù));scale()函數(shù)用于實(shí)現(xiàn)讓元素縮放transform:scale(x軸,y軸);skew()函數(shù)用于實(shí)現(xiàn)元素傾斜transform:skew(x軸,y軸);【示例11-7】實(shí)現(xiàn)多種2D轉(zhuǎn)換效果。1

<!DOCTYPE

html>2

<htmlxmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5

<title>2D轉(zhuǎn)換</title>6

<styletype="text/css">7

div{width:100px;height:100px;border:1pxsolidblack;float:left;text-

align:center;line-height:100px;margin-top:20px;background:#0C9;color:#FFF;}8

#Div2{transform:translate(0px,100px);}9

#Div3{transform:rotate(30deg);}10

#Div4{transform:scale(0.6,0.6);}11

#Div5{transform:skew(20deg,20deg);}12

</style>13

</head>14

<body>15

<divid="Div1">元素默認(rèn)樣式</div>16

<divid="Div2">向下位移</div>17

<divid="Div3">向右旋轉(zhuǎn)</div>18

<divid="Div4">縮小</div>19

<divid="Div5">傾斜</div>20

</body>21

</html>11.5.23D轉(zhuǎn)換3D轉(zhuǎn)換中實(shí)現(xiàn)旋轉(zhuǎn)和縮放效果的函數(shù)如下所示。translate3d(x,y,z)

translateX(x)translateY(y)translateZ(z)scale3d(x,y,z)scaleX(x)

scaleY(y)

scaleZ(z)

rotate3d(x,y,z,angle)

rotateX(angle)

rotateY(angle)

rotateZ(angle)

3D轉(zhuǎn)換的屬性如下所示。transform-origintransform-styleperspectiveperspective-originbackface-visibility【示例11-8】實(shí)現(xiàn)多種3D轉(zhuǎn)換效果。1

<!DOCTYPEhtml>2

<htmlxmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5

<title>3D轉(zhuǎn)換</title>6

<styletype="text/css">7

div{width:100px;height:100px;border:1pxsolidblack;float:left;text-

align:center;line-height:100px;margin:10px0px;background:#0C9;color:#FFF;margin-right:100px;}8

.cf{clear:left;}9

#Div2{transform:rotateX(60deg);}10

#Div3{transform:rotateY(60deg);}11

#Div4{transform:rotateZ(60deg);}12

.bc{width:900px;height:140px;}13

.bc2{perspective:150px;perspective-origin:10%10%;}14

.bc3{transform-style:preserve-3d;}15

</style>16

</head>17

<body>18

<h3>沒有設(shè)置3D屬性</h3>19

<divclass="bc">

20

<divid="Div1">元素默認(rèn)樣式</div>21

<divid="Div2">X軸旋轉(zhuǎn)</div>22

<divid="Div3">Y軸旋轉(zhuǎn)</div>23

<divid="Div4">Z軸旋轉(zhuǎn)</div>24

</div>25

<h3class="cf">子元素為2D</h3>26

<divclass="bc2bc">27

<divid="Div1">元素默認(rèn)樣式</div>28

<divid="Div2">X軸旋轉(zhuǎn)</div>29

<divid="Div3">Y軸旋轉(zhuǎn)</div>30

<divid="Div4">Z軸旋轉(zhuǎn)</div>31

</div>32

<h3class="cf">子元素為3D</h3>33

<divclass="bc3bc2bc">34

<divid="Div1">元素默認(rèn)樣式</div>35

<divid="Div2">X軸旋轉(zhuǎn)</div>36

<divid="Div3">Y軸旋轉(zhuǎn)</div>37

<divid="Div4">Z軸旋轉(zhuǎn)</div>38

</div>39

</body>40

</html>11.6過渡transition屬性的語法格式如下。transition:propertydurationfunctiondelay,…,

propertyN

durationN

functionN

delayN;【示例11-9】實(shí)現(xiàn)多種過渡效果。1

<!DOCTYPEhtml>2

<htmlxmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5

<title>過渡效果</title>6

<styletype="text/css">7

div{width:150px;height:100px;border:1pxsolidblack;margin-bottom:10px;text-align:center;line-height:100px;background:red;}8

#Div1{transition:width5sease-in-out2s;}9

#Div2{transition:width5sease-in-out2s,background3slinear0.5s;}10

#Div1:hover{width:500px;}11

#Div2:hover{width:500px;background:yellow;}12

</style>13

</head>14

<body>15

<divid="Div1">變寬ease-in-out</div>16

<divid="Div2">變色變寬linear</div>17

</body>18

</html>11.7動畫@keyframes規(guī)則用于創(chuàng)建指定的動畫。該規(guī)則會指定動畫中關(guān)鍵幀的樣式，其語法格式如下。@keyframesanimationname{

keyframes-selector{css-styles;}

…keyframes-selector{css-styles;}}animation屬性用于調(diào)用定義動畫的播放效果，其語法格式如下。animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state;【示例11-10】實(shí)現(xiàn)多個(gè)動畫效果。1

<!DOCTYPEhtml>2

<htmlxmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Cont

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論