HTML CSS DIV网页设计与布局（第3版）（微课版） 课件 第11章 CSS3特效和动画_第1页
HTML CSS DIV网页设计与布局（第3版）（微课版） 课件 第11章 CSS3特效和动画_第2页
HTML CSS DIV网页设计与布局（第3版）（微课版） 课件 第11章 CSS3特效和动画_第3页
HTML CSS DIV网页设计与布局（第3版）（微课版） 课件 第11章 CSS3特效和动画_第4页
HTML CSS DIV网页设计与布局（第3版）（微课版） 课件 第11章 CSS3特效和动画_第5页
已阅读5页，还剩25页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第11章CSS3特效和动画11.1圆角

11.2透明度

11.3背景

11.4渐变

11.52D和3D转换

11.6过渡

11.7动画

11.8小结

11.1圆角11.1.1设置边框为圆角

11.1.2设置每个圆角为指定值

11.1.1设置边框为圆角border-radius:数值;【示例11-1】设置元素的边框为圆角。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: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设置每个圆角为指定值border-radius:数值1数值2数值3数值4;【示例11-2】分别设置元素的4个圆角。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: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】设置图片和背景的透明度。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）设置元素的背景为指定颜色background-color属性（2）设置元素的背景为指定图像background-image属性（3）设置元素的背景图像的位置background-position属性位置值、x%y%、inherit（4）设置元素背景图像的平铺方式background-repeat属性repeat、repeat-x、repeat-y、no-repeat、inherit（5）通过background属性直接设置元素的背景颜色、背景图像、背景位置以及背景平铺方式，其语法格式如下。background:colorurlrepeatpostion…

;【示例11-4】设置元素的背景色和背景图像。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: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">一次性设置背景的多个属性</div>17

</body>18

</html>11.4渐变11.4.1线性渐变

11.4.2径向渐变

11.4.1线性渐变background-image属性的linear-gradient()函数background-image:linear-gradient(angle,color-stop1,…,

color-stopN);angle属性可以设置的角度值如图11.6所示。【示例11-5】实现多种线性渐变效果。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">两色默认方向</div>17

<divid="Div2">多色默认方向</div>18

<divid="Div3">多色关键字指定方向</div>19

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

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

</body>22

</html>11.4.2径向渐变要实现径向渐变时需要使用到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位置坐标原点为元素中心（centercenter），如图所示。使用以px为单位的数字定位时，位置坐标的原点位置（0px,0px）位于元素的左上角，如图所示。【示例11-6】实现多种径向渐变效果。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">数字坐标中心偏右</div>20

<divid="Div5">关键字中心偏左</div>21

</body>22

</html>11.5

2D和3D转换11.5.12D转换

11.5.23D转换

为了兼容多种浏览器语法格式如下。transform:函数1(参数)…函数n(参数);

/*标准写法*/-ms-transform:函数()…函数n(参数);

/*支持IE9*/-webkit-transform:函数()…函数n(参数);

/*支持Safari和Chrome*/-moz-transform:函数()…函数n(参数);

/*支持Firefox*/11.5.1

2D转换translate()函数用于实现让元素位移transform:translate(x轴,y轴);rotate()函数用于实现让元素旋转transform:rotate(度数);scale()函数用于实现让元素缩放transform:scale(x轴,y轴);skew()函数用于实现元素倾斜transform:skew(x轴,y轴);【示例11-7】实现多种2D转换效果。1

<!DOCTYPE

html>2

<htmlxmlns="/1999/xhtml">3

<head>4

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

<title>2D转换</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">元素默认样式</div>16

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

<divid="Div3">向右旋转</div>18

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

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

</body>21

</html>11.5.23D转换3D转换中实现旋转和缩放效果的函数如下所示。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转换的属性如下所示。transform-origintransform-styleperspectiveperspective-originbackface-visibility【示例11-8】实现多种3D转换效果。1

<!DOCTYPEhtml>2

<htmlxmlns="/1999/xhtml">3

<head>4

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

<title>3D转换</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>没有设置3D属性</h3>19

<divclass="bc">

20

<divid="Div1">元素默认样式</div>21

<divid="Div2">X轴旋转</div>22

<divid="Div3">Y轴旋转</div>23

<divid="Div4">Z轴旋转</div>24

</div>25

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

<divclass="bc2bc">27

<divid="Div1">元素默认样式</div>28

<divid="Div2">X轴旋转</div>29

<divid="Div3">Y轴旋转</div>30

<divid="Div4">Z轴旋转</div>31

</div>32

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

<divclass="bc3bc2bc">34

<divid="Div1">元素默认样式</div>35

<divid="Div2">X轴旋转</div>36

<divid="Div3">Y轴旋转</div>37

<divid="Div4">Z轴旋转</div>38

</div>39

</body>40

</html>11.6过渡transition属性的语法格式如下。transition:propertydurationfunctiondelay,…,

propertyN

durationN

functionN

delayN;【示例11-9】实现多种过渡效果。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规则用于创建指定的动画。该规则会指定动画中关键帧的样式，其语法格式如下。@keyframesanimationname{

keyframes-selector{css-styles;}

…keyframes-selector{css-styles;}}animation属性用于调用定义动画的播放效果，其语法格式如下。animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state;【示例11-10】实现多个动画效果。1

<!DOCTYPEhtml>2

<htmlxmlns="/1999/xhtml">3

<head>4

<metahttp-equiv="Cont

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论